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 系列方法获得。