首頁 > web前端 > js教程 > JavaScript操作DOM元素的childNodes和children區別_javascript技巧

JavaScript操作DOM元素的childNodes和children區別_javascript技巧

WBOY
發布: 2016-05-16 16:06:38
原創
1245 人瀏覽過

對於DOM元素,children是指DOM Object類型的子對象,不包括tag之間隱形存在的TextNode,而childNodes包括tag之間隱形存在的TextNode對象。

具體看一下針對children和childNodes在chrome環境下的測試:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <div id="div1" class="div">
 <span id="s1" class="sp" lang="zh-cn">
 </span>
 </div>
</body>
<script type="text/javascript">
 
 function test() {
 var o = document.getElementById("div1");
 var child = o.children;
 console.log("div1.children运行结果:");
 for(i = 0; i < child.length; i++){
   console.log(child[i].tagName);
  }
 
 console.log("");
 child = o.childNodes;
 console.log("div1.childNodes运行结果:");
 for(i = 0; i < child.length; i++){
   console.log(child[i].tagName);
  }
 
 }
 
 test();

</script>
</html>

登入後複製


檢驗結果如下:

 div1.children运行结果:
 SPAN

 div1.childNodes运行结果:
 undefined
 SPAN
 undefined

登入後複製

上面childNodes集合的結果中有兩個undefined節點,這連個就是nodeType=3的TextNode。

如果把HTML程式碼寫成如下樣式,那麼children和childNodes的結果就沒有差別了。

<body>
 <div id="div1" class="div"><span id="s1" class="sp" lang="zh-cn"></span></div>
</body>

登入後複製

對document、head、body及div等HTML元素實測未發現有其他差異

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板