Javascript(笔记24) - DOM基本操作 - 遍历元素节点树的方法

Javascript(笔记24) - DOM基本操作 - 遍历元素节点树的方法

上一节讨论了遍历节点，这一节讨论遍历元素节点，毕竟元素节点才是我们操作最为频繁的。

使用方法跟遍历节点的非常相似：

parentElement      -->  返回父元素节点
children           -->  返回子元素节点
firstElementChild  -->  返回第一个元素节点
lastElementChild   -->  返回最后一个元素节点

遍历元素节点

parentElement

返回当前元素的父元素节点（IE不兼容）

parentNode 是返回当前元素的父节点；

parentElement 是返回当前元素的父元素节点，父元素节点只有一个；

看下HTML

<div>
    <!-- this is commet -->
    <strong></strong>
    <span></span>
</div>

先取得 div:

var div = document.getElementsByTagName("div")[0];

看控制台：

当前 div 对象父级就是 body 了，再向上取呢？ 

再向是  html ，再向上就是 null 了。 

children

只返回当前元素的元素子节点

childNodes 是返回当前元素的子节点；

children 是返回当前元素的元素子节点；

<div>
    <!-- this is commet -->
    <strong></strong>
    <span></span>
</div>

children 算的是元素之节点：

var div = document.getElementsByTagName("div")[0];

控制台输出：

这次必然是2个了，已经文本节点和注释节点，都不算元素节点。

元素节点只有 strong 和 span 了。 

node.childElementCount

这个属性和  node.children.length 效果一样；

这个属性和 children.length 的效果一样，就可以跳过了，记不记都行。

​firstChild 和 lastChild 分别是返回第一和最后的节点；

firstElementChild 和 lastElementChild 分别是返回第一和最后的元素节点：

firstElementChild

返回的是第一个元素节点（IE不兼容）

还用上面的HTML结构：

<div>
    <!-- this is commet -->
    <strong></strong>
    <span></span>
</div>

JS获取 div ： 

var div = document.getElementsByTagName("div")[0];

控制台获取第一个元素节点：

lastElementChild

返回的是最后一个元素节点(IE不兼容)

var div = document.getElementsByTagName("div")[0];

获取最后一个元素节点：

nextSilbing  和 previousSibling 分别是获取下一个和上一个兄弟节点；

nextElementSiling 和 previousElementSibling 分别是获取下一个和上一个兄弟元素节点；

nextElementSibling

返回的是下一个（后一个）兄弟元素节点(IE不兼容)

还用上面的HTML结构：

<div>
    <!-- this is commet -->
    <strong></strong>
    <span></span>
</div>

JS获取 strong： 这次不是 div 了，是div 里的 strong.

var strong = document.getElementsByTagName("strong")[0];

控制台获取下一个兄弟元素节点：

previousElementSibling

返回的是上一个（前一个）兄弟元素节点(IE不兼容)

控制台输出：

strong 下一个兄弟元素节点的上一个兄弟元素节点，就是它自己。 

遍历节点的方法浏览器都普遍兼容了，

遍历元素节点的方法，在IE系列的浏览器不能很好的兼容，但目前不存在了。

开发中用的比较多的还是  childNodes  和 children  ，因为其他方法都可以用 get 系列方法获得。