Question

我试图计算身体中的元素，我正在做这个

<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树如何评估子节点是否存在？

Answer 1

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

Answer 2

就像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。

Answer 3

childNodes将所有html标记以及普通文本计为单独的节点。如果标签之间只有一个空格或新行，它们将是文本节点并在childNodes中计算。

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

新行增加了我的body.childNodes计数

3 个答案: