Question

我有以下HTML：

<ul id="nav">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
</ul>

试图走元素时，

1 nav.childNodes.length是9，九个节点是什么？

2 nav.childNodes[0].nodeType为3，但.nodeValue为空。

编辑：

完成后它可以正常工作：

<ul id="nav"><li><a href="#">One</a></li><li><a href="#">Two</a></li><li><a href="#">Three</a></li><li><a href="#">Four</a></li></ul>

为什么将空白区域视为节点？

Answer 1

<li>个节点之间有文本节点（其中没有任何内容可见）。 5 + 4 = 9。

Answer 2

小心你所陈述的内容在IE中是不正确的。在IE中，您的代码显示4个子节点。这是因为IE不将空白视为节点，而是Mozilla，Chrome和Safari。

像Pointy所说的那样，除了IE之外，空格都是节点，所以在ul之后是空格，4个li是5个节点的空白+4个节点的li = 9个节点。

如果您只想要LI节点：

document.getElementById("nav").getElementsByTagName("li").length

以上显示4作为答案。它在所有浏览器中都是一样的。

如果必须使用所有子节点，只需忽略类型3节点（文本，因此是空白），并专注于类型1节点（元素节点）。

试图访问DOM节点，获取错误的nodeValues和长度

编辑：

2 个答案: