Body 元素上的子节点数 javascript

Question

Body 元素上的子节点数为 1，即使那里什么也没有。这只发生在 Body 元素上，但不会发生在其他元素上，例如 div。在这种情况下，结果为 0。这是为什么呢？

<head>
<script>
  function run() {
    alert(document.body.childNodes.length);
  }
  window.addEventListener("load", run, false);
</script>
</head>

<body></body>

</html>

而结果是 0

<!Doctype html>
<html>
<head>
<script>
  function run() {
    alert(document.body.getElementsByTagName("div")[0].childNodes.length);
  }
   window.addEventListener("load",run,false);
</script>
</head>
<body>
<div></div>
</body>
</html>

Answer 1

体内有白色space。白色space被认为是'text'并且'text'被认为是一个节点。

如果你稍微改变你的代码，你可以输出 nodeName。在这种情况下，它输出 #text.

因为我们已经知道有1个节点，我们可以简单地输出childNodes[0]。如果你有多个，你可以遍历它们并输出每个。

<head>
<script>
    function run() {
      alert(document.body.childNodes[0].nodeName);
    }
    window.addEventListener("load", run, false);
</script>
</head>

<body></body>

</html>

我无法去掉body标签中的白色space，但我可以去掉div标签中的白色

<!Doctype html>
<html>
<head>
<script>
  function run() {
        var length = document.body.getElementsByTagName("div")[0].childNodes.length;
        if(length > 0) {
            length += "\n" + document.body.getElementsByTagName("div")[0].childNodes[0].nodeName;
        }
    alert( length );
  }
   window.addEventListener("load",run,false);
</script>
</head>
<body>
<div></div>
</body>
</html>

如果您在 div 标签（space、换行符等）之间添加任何白色space，警报将有一个文本节点。

编辑： 它似乎与浏览器有关。这是 IE、Firefox 和 Chrome 中的行为。我不确定其他浏览器是否以这种方式运行。

Answer 2

由于 the HTML parsing algorithm 的要求，在 DOM 中，问题中代码片段中的 body 最终包含两个换行符。所以它在 DOM.

中确实有一个文本节点子节点

尝试 document.documentElement.innerHTML 使用该文档——例如，只需将代码片段修改为：

<head>
<script>
  function run() {
    alert(document.body.childNodes.length);
    alert(document.documentElement.innerHTML);
  }
  window.addEventListener("load", run, false);
</script>
</head>

<body></body>

</html>

…你会得到这样的结果：

<head>
<script>
  function run() {
    alert(document.body.childNodes.length);
    alert(document.documentElement.innerHTML);
  }
  window.addEventListener("load", run, false);
</script>
</head>

<body>


</body>

或者在浏览器开发工具或使用 Live DOM Viewer.

中检查问题中的文档

Body 元素上的子节点数 javascript

Number of child Nodes on Body element javascript

javascript

dom

html-parsing

document-body

child-nodes