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.