DOM元素的遍歷

wangxiaoxaio發表於2019-04-14

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高程讀後感

相關文章