0

我正在尝试计算身体中的元素数量，而我正在这样做

<html>
<head>
<title>Practice Javascript</title>
<script>
window.onload = count;
function count()
{ 
 var ele = document.body.childNodes;
 alert(ele.length);
}

</script>
</head>
<body>
<p>Text one</p>
<p>Text Two</p>
</body>
</html>

我期待输出为 2 但它是 5

但是当我通过以下代码删除新行时

<html>
<head>
<title>Practice Javascript</title>
<script>
window.onload = count;
function count()
{ 
 var ele = document.body.childNodes;
 alert(ele.length);
}

</script>
</head>
<body><p>Text one</p><p>Text Two</p>
</body>
</html>

它给出输出 3 Dom 树如何评估不存在的子节点？

4

3 回答 3

3

childNodes包含文本节点。改为使用childElementCount。 children另一方面，不包含文本节点。所以你可以使用node.children.length. 在您的情况下，该 html 中有 3 个新行，因此 3+2 是 5。

于 2013-09-17T12:58:32.487 回答
1

就像 simonzack 已经说过的那样，换行符正在处理到 textNodes。因此，您在身体下方获得了 5 个节点，就像您一样

<body>
  TextNode{\n}
  ElementNode{p}
  TextNode{\n}
  ElementNode{p}
  TextNode{\n}
</body>

您可以通过删除 html 中的所有空格和换行符来避免这种情况，例如

<body><p>Text one</p><p>Text Two</p></body>

或者childElementCount按照建议使用。

于 2013-09-17T13:04:13.980 回答
0

childNodes 将所有 html 标记以及普通文本计为单独的节点。如果标签之间甚至有一个空格或换行符，它们将是文本节点并计入 childNodes。

此外，您应该注意 childNodes 不是递归的，因为它不会报告直接子节点内的节点。

于 2013-09-17T13:01:08.983 回答