javascript .childNodes 和 .children 之间的区别答案

【问题标题】：Difference between javascript .childNodes & .childrenjavascript .childNodes 和 .children 之间的区别
【发布时间】：2013-05-21 15:39:06
【问题描述】：

我已经使用 javascript 一个星期了。我目前正在努力通过节点使事情工作/改变。但是我一直注意到一些奇怪的东西，对于一个不熟练的javascripter来说，它是。

我的网站中有这样的结构：

<html>

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

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

当我尝试使用下一个函数查找子节点时：

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's

但是当我简单地将“document.body.childNodes”更改为“document.body.children”时，一切都完美无缺，“NULL”值甚至会发生变化。

我想知道 HTML 文件中的“NULL”值代表什么，因为“NULL”值所在的位置没有元素。在我的脑海中，它给了我一个不存在的、可见的东西的表示，但它是......

谁能给我解释一下这是怎么回事？

Ps：我很抱歉可能会重新发布此问题，但我找不到关于此问题的合适的其他问题！

Pss：找到一个转发（What is the difference between children and childNodes in JavaScript?）。但它没有回答为什么它仍然将看不见的子节点识别为未定义。

【问题讨论】：

它不会将它们视为undefined。它将它们的.className 属性视为undefined，因为文本节点没有类。
但事情是这样的。没有文字:(....基本上是下一行。它们之间甚至没有空格
我看到document.body 的div 子项之间有很多空白区域。
所以可以肯定地说 javascript 将空白视为 childNode 吗？？
IE8 及更低版本没有，但符合 W3 的浏览器可以。有效标记中的所有内容都将在 DOM 中表示。仅供参考，您可以使用 .nodeName 属性查看您拥有的节点类型。一个文本节点将显示#text，而一个元素将给出大写的标签名称。

标签： javascript parent-child nodes

【解决方案1】：

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 会给您一个列表，其中包含文本节点（即使它们被空格填充）、cmets 和各种其他节点类型，您可能也不必担心很多。

【讨论】：