javascript .childNodes和.children之間的區別

我一直在使用javascript一個禮拜。我目前正在努力通過節點來完成工作/更改。但我一直注意到一些奇怪的事情，對於一個不熟練的寫手來說也是如此。javascript .childNodes和.children之間的區別

我有一個像這樣在我的網站結構：

<html> 

<head> 
    <title>....</title> 
    <link/> 
    <script></script> 
</head> 

<body> 
    <div 1> 
     <div 2></div> 
    </div> 
</body> 
</html>

當我試圖找到下一個功能的childnode：

var headerBox = document.body.childNodes; 
var txt = ""; 

for (var x = 0; x < headerBox.length; x ++) { 
txt =txt+"Childnode["+x+"]: "+headerBox[x].localName+" ("+headerBox[x].className+")<br>"; 
} 

var x = document.getElementById(box); 
x.innerHTML = txt;

我得到一個列表與一對夫婦的不確定「NULL」加上reali DIV的

但是，當我簡單地將「document.body.childNodes」更改爲「document.body.children」時，所有內容都完美無缺，「NULL」值甚至發生了變化。

我想知道的是「NULL」值在HTML文件中表示什麼，因爲在「NULL」值的位置沒有元素。在我的腦海裏，它給了我一些不在那裏，可見，但它是...

任何人都可以請向我解釋發生了什麼事？

Ps：我很抱歉也許轉發這個，但我找不到有關此事的其他問題！

Pss：找到了一個轉貼（What is the difference between children and childNodes in JavaScript?）。但它並沒有回答爲什麼它仍然認爲未定義的未知的孩子節點。

來源

2013-05-26 Kipt Scriddy

它不會將它們視爲「未定義」。它將'.className'屬性看作'undefined'，因爲文本節點沒有類。 – 2013-05-26 17:59:18

但事情是。沒有文字：（....基本上是下一行，它們之間沒有空格 –

我在'document.body'的'div'子節點周圍看到了很多空白區域 – 2013-05-26 18:06:03

childNodes會給你各種節點，而children會給你只有元素節點。您可以使用nodeType來檢查當前節點是什麼樣的節點：

document.body.childNodes[0].nodeType

這會給你一個整數：

1 ELEMENT_NODE 
2 ATTRIBUTE_NODE 
3 TEXT_NODE 
4 CDATA_SECTION_NODE 
5 ENTITY_REFERENCE_NODE 
6 ENTITY_NODE 
7 PROCESSING_INSTRUCTION_NODE 
8 COMMENT_NODE 
9 DOCUMENT_NODE 
10 DOCUMENT_TYPE_NODE 
11 DOCUMENT_FRAGMENT_NODE 
12 NOTATION_NODE

正如你所看到的，使用childNodes會給你一個列表，即包含文本節點（即使它們充滿了空格），註釋和各種其他節點類型，您可能不必太擔心。

來源

2013-05-26 18:30:53 basilikum

javascript .childNodes和.children之間的區別

回答

相關問題