DOM元素的遍历

DOM为文档的每个节点都提供了childNodes属性，该属性返回一个nodeList对象。使用该属性可以对节点的子节点进行遍历。

####但是更多的我们只是想遍历某一元素的子元素，此时该属性就不适用这种情况了。 原因是:当元素内出现空格时，该属性在不同浏览器下的行为不一致，IE9之前的版本不会返回文本节点，而其他浏览器返回的节点包括文本节点。

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
复制代码

var ul = document.getElementsByTagName('ul')[0];
var len = ul.childNodes.length;
console.log(len);  //IE9之前的版本返回3，而其他浏览器则返回7
复制代码

从以上的代码可以看出，当我们只想遍历元素的子元素时，使用childNodes并不能理想的得到我们想要的结果。

DOM扩展为DOM元素提供了新的属性可以解决这些问题，这些属性包括：

1. childElementCount //返回子元素的个数（不包括文本和注释节点）
2. firstElementChild //指向第一个子元素，firstChild的元素版
3. lastElementChild //指向最后一个子元素，lastChild的元素版
4. previousElementSibling //指向前一个同辈元素，previousSibling的元素版
5. nextElementSibling //指向后一个同辈元素，nextSibling的元素版

支持这些属性的浏览器包括：IE9+,Firefox 3.5+,Safari 4+,chrome和Opera 10+，在这些浏览器中，可以方便的对元素进行遍历，而不用担心空白的文本节点。

IE提出的children属性，也可以方便的对元素的子元素进行遍历，它返回元素中同样还是元素的子节点，值为HTMLCollection的集合。

支持 children 属性 的 浏览器 有 IE5、 Firefox 3. 5、 Safari 2（ 但 有 bug）、 Safari 3（ 完全 支持）、 Opera8 和 Chrome（ 所有 版本）。 IE8 及 更早 版本 的 children 属性 中 也会 包含 注释 节点， 但 IE9 之后 的 版本 则 只 返回 元素 节点。

本文属性Js高程读后感

转载于:https://juejin.im/post/5cb2d46be51d456e6f45c6da