Question

我遇到了遍历DOM树的问题。这是我的代码：

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="main.js"></script>
   <title>DOM Traversing</title>
</head>

<body>
    <ol>
        <li>
            <a href="">One</a>
            <ul>
              <li><a href="">1.1</a></li>
              <li><a href="">1.2</a></li>
              <li><a href="">1.3</a></li>
            </ul>
       </li>
       <li><a href="">Two</a></li>
       <li><a href="">Three</a></li>
       <li><a href="">Four</a></li>
    </ol>
</body>

</html>

使用Javascript：

var rootNodeChildren = document.childNodes;
var rootNodeChild;

for (var i = 0; i < rootNodeChildren.length; ++i) {
    rootNodeChild = rootNodeChildren[i];
    console.log(rootNodeChild);
    console.log(rootNodeChild.childNodes.length);
    for (var j = 0; j < rootNodeChild.childNodes.length; ++j) {
        console.log(rootNodeChild.childNodes[j]);
    }
}

这是以下代码的结果：

文档对象有2个孩子

DOCTYPE html
html标签

html标签也应该有2个孩子。

头标记
body tag

但输出显示html标签只有一个子标题，即头标记

有人可以解释一下原因吗？

在示例中，HTML不相关，但我打算编写一个递归函数来遍历DOM树的所有元素。

Answer 1

这是由于脚本执行时间。

脚本在DOM上存在body元素之前运行：因此它正确地告诉你head元素是当时唯一的子元素。

将您的脚本移到底部，它会在您的计数中包含body元素。

无法理解为什么html标签没有head和body作为子节点？

1 个答案: