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）.safari 瀏覽器支援此屬性。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#box {
  width :120px;
  height :70px;
  list-style-type: none;
  border :2px dotted #ccc;
  font-size :12px;
  margin-bottom: 5px;
}
#show {
  width :120px;
  color :green;
  font-size :12px;
  border :2px dotted #ccc;
  text-align: center;
}
</style>
<script>
window.onload = ()=> {
  let oDiv = document.getElementById("box");
  let oShow = document.getElementById("show");
  oShow.innerHTML = oDiv.childNodes.length;
}
</script>
</head>
<body>
<div id="box">
  <div></div>
  <div></div>
</div>
<div id="show"></div>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/202004/01/220326z3vfpr2udf2u42r3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.box 元素具有五個子節點。

（2）.box 元素下有兩個子元素節點，同時包含三個文字節點。

（3）.空格和換行被作為文字節點處理。瀏覽器相容問題：

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

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

通常情況下，只需要獲取子元素節點，當前 children 屬性可以勝任此任務。

但 children 屬性是非 w3c 標準屬性，所以有可能突然不被瀏覽器支援。

所以還是使用 childNodes 更加穩妥，下面做一下相容性處理：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="https://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
#box {
  width :120px;
  height :70px;
  list-style-type: none;
  border :2px dotted #ccc;
  font-size :12px;
  margin-bottom: 5px;
}
#show {
  width :160px;
  color :green;
  font-size :12px;
  border :2px dotted #ccc;
  text-align: center;
}
</style>
<script>  
window.onload= ()=> { 
  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>  
<ul id="box"> 
  <li>螞蟻部落一</li> 
  <li>螞蟻部落二</li> 
  <li>螞蟻部落三</li> 
  <li>螞蟻部落四</li> 
</ul> 
<div id="show"></div> 
</body>  
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/202004/01/220412cmm8l3f6om8oesfo.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()一章節。

相關文章