Difference between javascript .childNodes & .children

Difference between javascript .childNodes & .children

本文关键字：amp children childNodes between javascript Difference      更新时间：2023-09-26

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

我的网站有一个这样的结构:

<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"加上真正的DIV的

但是当我简单地改变"document.body。childNodes" to "document.body。

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

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

Ps:我很抱歉可能重新发布这个，但我找不到合适的其他问题关于这件事!

Pss:发现了一个repost(在JavaScript中children和childNodes有什么区别?)但它没有回答为什么它仍然将未见的子节点识别为未定义。

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将给您一个列表，其中包含文本节点(即使它们被空白填充)，注释和各种其他节点类型，您可能不必担心太多。

相关文章：