javascript .childNodes& 。孩子

时间:2013-05-26 17:49:20

标签: javascript parent-child nodes

我已经使用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的

但是,当我只是将“document.body.childNodes”更改为“document.body.children”时,一切都很完美,“NULL”值甚至会发生变化。

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

有人可以向我解释发生了什么事吗?

Ps:我很抱歉可能转发这个但是我找不到合适的其他问题!

Pss:找到一个转贴(What is the difference between children and childNodes in JavaScript?)。但它没有回答为什么它仍然认为看不见的儿童节点是未定义的。

1 个答案:

答案 0 :(得分:16)

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将为您提供一个列表,其中包含文本节点(即使它们填充了空格),注释和各种其他节点类型,您可能不需要太担心了。