zoukankan      html  css  js  c++  java
  • L7-DOM基础

    今天学习了DOM,它是JavaScript组成(ECMAScript 、DOM、 BOM)部分之一。

    DOM是什么?

    DOM:文档对象模型(Document Object Model,简称DOM)。具有操作HTML页面的能力。

    DOM节点

      childNodes   nodeType

    childNodes获取到的节点包含:文本节点和元素节点。其中获取到的文本节点和元素节点的混合体,而其中文本节点是没有添加删除属性等的操作,如果我们要对元素节点进行属性操作,必须要通过另外一个属性nodeType配合使用。(扩展:nodeType==3是文本节点,nodeType==1是元素节点,我们就可以对其进行if判断,来对我们的元素节点进行操作)。

    children

    有没有直接获取元素节点的方法呢?其实是有的,接下来就是我们要介绍的children,它就是只获取元素节点的一个方法。

    parentNode

    parentNode是获取元素节点的父节点。

    例子:点击链接,隐藏整个li

    <ul id = "ul1">

    <li>aaa<a href = "javascript:;">隐藏</a></li>

    <li>bbb<a href = "javascript:;">隐藏</a></li>

    <li>ccc<a href = "javascript:;">隐藏</a></li>

    </ul>

    var oUl = document.getElementById("ul1");

    var aLi  = oUl.getElementsByTagName("a");

    for(var i = 0; i < aLi.length; i++){

    aLi[i].onclick = function(){

    aLi[i].parentNode.style.display = "none";

    }

    }

    offsetParent

    绝对定位的元素是根据谁定位的?绝对定位的元素是根据他定位的父级元素定位,如果它的直接父级没有定位,那么它会往上找,直到找到,那么就是他的父级元素。我们可以同offsetParent来快速查找出他的父级定位元素。

    获取首尾节点

    firstChild       lastChild           //使用在IE6-8版本的

    firstElementChild      lastElementChild      // FF Chrome IE9 

    获取兄弟节点

    nextSibling      previousSibling    //使用在IE6-8版本的

    nextElementSibling  perviousElementSibling    // FF Chrome IE9 

    操作元素属性的方法

      第一种:obj.style.display = 'block'

      第二种:obj.style['display'] = 'block'

      第三种:DOM方式

    DOM操作元素节点

      获取:getAttribute(名称)

      设置:setAttribute(名称,值)

      删除:removAttribute(名称)

  • 相关阅读:
    开源的Linux QQ
    如何从VS2003升级到VS2008
    LINQ在开发中的地位?
    SQL Server 2005 Analysis Services
    .NET framework源代码开放了
    WebForms和MVC这2个模型都很棒,由相关讨论想到的
    IIS 7.0相关文章收集
    探究基于声明的身份标识
    微软为“离线”做好准备:推出同步框架
    通用日志
  • 原文地址:https://www.cnblogs.com/linyongli/p/5313004.html
Copyright © 2011-2022 走看看