0

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

2 回答 2

1

体内有空白。空白被认为是“文本”，“文本”被认为是一个节点。

如果您稍微更改代码，则可以输出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，但我可以在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标签（空格、换行符等）之间添加任何空格，则警报将有一个文本节点。

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

于 2017-01-04T01:52:54.157 回答
0

由于HTML 解析算法的要求，在问题的代码片段中的 DOMbody中最终包含两个换行符。所以它在 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>

或者只是在浏览器 devtools 或使用Live DOM Viewer中检查问题中的文档。

于 2017-01-04T15:30:57.550 回答