javascript中children和childNodes的區別

1，childNodes：它是標準屬性，它返回指定元素的子項目集合，包括HTML節點，所有屬性，文本節點。
可以通過nodeType來判斷是哪種類型的節點，只有當nodeType==1時才是元素節點，2是屬性節點，3是文本節點。

有些人錯誤的使用()去取該集合元素，下表列出各瀏覽器對childNodes(i)的支援情況：

IE6/7/8/Safari/Chrome/Opera
IE9/Firefox

childNodes(i)
支援
不支援

有時候需要擷取指定元素的第一個HTML子節點（非屬性/文本節點），最容易想到的就是firstChild 屬性。代碼中第一個HTML節點前如果有換行，空格，那麼firstChild返回的就不是你想要的了。可以使用nodeType來判斷下。

• function getFirst(elem){
• for(var i=0,e;e=elem.childNodes[i++];){
• if(e.nodeType==1)
• return e;
• }
• }

2，children：非標準屬性，它返回指定元素的子項目集合。

但它只返回HTML節點，甚至不返迴文本節點，雖然不是標準的DOM屬性，但它和innerHTML方法一樣，得到了幾乎所有瀏覽器的支援。

和childNodes 一樣，在Firefox下不支援()取集合元素。因此如果想擷取指定元素的第一個HTML節點，可以使用children[0]來替代上面的getFirst函數。

這裡需要注意的是children在IE中包含注釋節點。

原創文章，轉載請註明： 轉載自前端開發

本文連結地址: javascript中children和childNodes的區別

Filed under javascript

You can leave a comment, or trackback from your own site.