Javascript 新行增加我的body.childNodes计数_Javascript_Dom

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

javascript dom

Javascript 新行增加我的body.childNodes计数,javascript,dom,Javascript,Dom,我试图数一数身体中的元素数量，我正在这么做 <html> <head> <title>Practice Javascript</title> <script> window.onload = count; function count() { var ele = document.body.childNodes; alert(ele.length); } </script> </head> <bod

我试图数一数身体中的元素数量，我正在这么做

<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>


练习Javascript
window.onload=计数；
函数计数（）
{ 
var ele=document.body.childNodes；
警报（ele.length）；
}
正文一
文本二

我期望输出为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>


练习Javascript
window.onload=计数；
函数计数（）
{ 
var ele=document.body.childNodes；
警报（ele.length）；
}
正文一
正文二

它的输出为3

Dom树如何计算不存在的子节点数

childNodes

包含文本节点。改用

childElementCount

。另一方面，子节点不包含文本节点。因此，您可以使用

node.children.length

。

在您的例子中，html中有3行新行，因此3+2是5。

childNodes

包含文本节点。改用

childElementCount

。另一方面，子节点不包含文本节点。因此，您可以使用

node.children.length

。

在您的例子中，html中有3行新行，因此3+2等于5。

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

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

childNodes将所有html标记以及普通文本作为单独的节点进行计数。如果标记之间只有一个空格或新行，则它们将是文本节点并计入子节点

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

正如simonzack已经说过的，换行符正在处理为textNodes。因此，在主体下方有5个节点，如图所示

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


TextNode{\n}
元素节点{p}
TextNode{\n}
元素节点{p}
TextNode{\n}

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

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

文本一
文本二

或者按照建议使用

childElementCount

。

就像simonzack已经说过的那样，换行符正在被处理到textNodes。因此，在主体下方有5个节点，如图所示

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


TextNode{\n}
元素节点{p}
TextNode{\n}
元素节点{p}
TextNode{\n}

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

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

文本一
文本二

或者按照建议使用

childElementCount

。

换行符是一个文本节点。所以是的。节点数将增加。您应该知道文本，即使在元素标记之外，仍然是父元素的子节点。换行符是文本节点。所以是的。节点计数将增加。您应该知道文本，即使在元素标记之外，仍然是父元素的子节点。Textone

textwo

这也会提醒我3Textone

textwo

这也会提醒我3Textone

textwo

这也会提醒我在html之前或之后没有任何换行符。它们作为正文中的文本节点计数。这是有效的：

Textone
textwo
Textone
textwo
这也提醒我在html之前或之后没有任何换行符。它们作为正文中的文本节点计数。这是有效的：Textone
textwo