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之间的区别

回答

相关问题