JavaScript childNodes

admin發表於2018-10-08
JavaScript

此屬性可以獲取指定元素的所有直接子節點。

所謂直接子節點就是第一級子節點，再深層次的後代節點不包括在內。

childNodes屬性的功能與children屬性類似，異同點總結如下：

（1）.children非W3C標準屬性。

（2）.childNodes獲取所有型別子節點，children只獲取一級子元素節點。

關於children屬性可以參閱JavaScript children一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
elementNode.childNodes

瀏覽器支援:

（1）.IE瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.opera瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  let odiv=document.getElementById("box");
  let oshow=document.getElementById("show");
  let obt=document.getElementById("bt");
  obt.onclick = function () {
    oshow.innerHTML = odiv.childNodes.length;
  }
}
</script>
</head>
<body>
<div id="show"></div>
<div id="box">
  <div></div>
  <div></div>
</div>
<input type="button" id="bt" value="檢視效果" />
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/08/221754uazi6foiokh2ivox.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

有執行結果可以得出box元素具有五個子節點。

相信，肯定有不少初學者對此產生疑惑，box元素下明明只有兩個div元素，怎麼會有5個子節點。

在前面提到過，childNodes獲取子節點沒有型別限制，div是兩個元素節點，還有三個文字節點。

這是因為空格和換行被看做一個文字節點，5個子節點 = 三個文字節點 + 二個元素節點。

瀏覽器相容問題：

（1）.IE9+和其他標準瀏覽器返回5。

（2）.IE9以下瀏覽器會忽略文字和空格，所以返回2。

通常情況下，我們只需要獲取子元素節點，children屬性可以很好的獲得。

但是由於children屬性是非w3c標準，所以有很大可能突然不被某一些瀏覽器支援。

所以還是使用childNodes更加穩妥，不過需要將文字節點過濾。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script>  
window.onload=function() { 
  let obox=document.getElementById("box"); 
  let childNodes = obox.childNodes;
  let oshow=document.getElementById("show"); 
  let arr = [];
  for (let index = 0; index < childNodes.length; index++) {
    if (childNodes[index].nodeType != 1) {
      continue;
    } else {
      arr.push(childNodes[index]);
    }
  } 
  oshow.innerHTML = arr.length;
} 
</script>  
</head>  
<body>  
<div id="show"></div> 
<ul id="box"> 
  <li>螞蟻部落一</li> 
  <li>螞蟻部落二</li> 
  <li>螞蟻部落三</li> 
  <li>螞蟻部落四</li> 
</ul> 
</body>  
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/08/221854xe6qq51hhq5zlhdh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼通過for迴圈將文字節點過濾掉，就實現了children相同的功能。

相關閱讀：

（1）.for迴圈可以參閱JavaScript for 迴圈語句一章節。

（2）.nodeType可以參閱JavaScript nodeType節點型別一章節。

（3）.continue可以參閱JavaScript break與continue語句一章節。

（4）.push方法可以參閱JavaScript push()一章節。

相關文章