JavaScript中childNodes和children的區(qū)別

<!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運行結(jié)果:");
 for(i = 0; i < child.length; i++){
   console.log(child[i].tagName);
  } 
 console.log("");
 child = o.childNodes;
 console.log("div1.childNodes運行結(jié)果:");
 for(i = 0; i < child.length; i++){
   console.log(child[i].tagName);
  }  
 } 
 test(); 
</script>
</html>
div1.children運行結(jié)果:
SPAN
 
div1.childNodes運行結(jié)果:
undefined
SPAN
undefined

1.childNodes返回的是節(jié)點的子節(jié)點集合,包括元素節(jié)點、文本節(jié)點還有屬性節(jié)點,所以上面代碼中,兩個undefined其實是元素節(jié)點后面跟的回車符,默認(rèn)為一個文本節(jié)點。
2.children返回的只是節(jié)點的元素節(jié)點集合,所以返回的只有span元素。
所以在判斷是否有子節(jié)點的時候要注意..盡量使用children吧
3.也可以使用hasChildNodes方法來判斷,但是要注意如果節(jié)點下有回車符之類的,hasChildNodes也會判定存在節(jié)點..

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言:盡管現(xiàn)在有很多優(yōu)秀的框架,大大簡化了我們的DOM操作,但是我們?nèi)匀灰獙W(xué)好DOM知識來寫原生JS,從根本上去理...
    長鯨向南閱讀 2,060評論 0 0
  • 第3章 基本概念 3.1 語法 3.2 關(guān)鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,527評論 0 21
  • 基本概念 DOM DOM 是 JavaScript 操作網(wǎng)頁的接口,全稱為“文檔對象模型”(Document Ob...
    許先生__閱讀 933評論 0 1
  • ??DOM(文檔對象模型)是針對 HTML 和 XML 文檔的一個 API(應(yīng)用程序編程接口)。 ??DOM 描繪...
    霜天曉閱讀 3,869評論 0 7
  • 1 什么是DOM 文檔對象模型 (DOM) 是HTML和XML文檔的編程接口。它提供了對文檔的結(jié)構(gòu)化的表述,并定義...
    YyzclYang閱讀 1,903評論 0 0

友情鏈接更多精彩內(nèi)容