JavaScript DOM遍历顺序_Javascript

JavaScript DOM遍历顺序

javascript

JavaScript DOM遍历顺序,javascript,Javascript,我编写了以下页面来演示DOM遍历： <html> <head> <title>DOM Traversal</title> </head> <body> <div> <p>Sample paragraph</p> </div> <h1>Sample H1</h1> <script> // Traversing the DOM tree

我编写了以下页面来演示DOM遍历：

<html>
<head>
<title>DOM Traversal</title>
</head>

<body>

<div>
<p>Sample paragraph</p>
</div>
<h1>Sample H1</h1>

<script>

// Traversing the DOM tree
"use strict";
var node = document.body;

document.addEventListener("DOMContentLoaded", function (event) {
    while(node) {
        console.log(node);
        node = node.firstChild;
    }
}, false);

</script>
</body>

</html>


DOM遍历
示例段落
样本H1
//遍历DOM树
“严格使用”；
var节点=document.body；
document.addEventListener（“DOMContentLoaded”），函数（事件）{
while（节点）{
console.log（节点）；
node=node.firstChild；
}
}，假）；

根据我的理解，输出应该是body->div->p，但它是body->text。有人能解释一下什么是文本以及为什么我没有得到想要的订单吗？

这些都是“空文本”节点，我在这里写了关于它们的博客：

这里对它们进行了解释：

这些是“空文本”节点，我在这里写了关于它们的博客：

这里解释它们：

在

body

和

div

之间有空格：

<body>

<div>

该空白虽然在概念上是空的，但它是DOM的一部分。在此遍历中，它被解释为

#text

。（您可能会看到许多

#text

节点。）

在

body

和

div

之间有空格：

<body>

<div>

该空白虽然在概念上是空的，但它是DOM的一部分。在此遍历中，它被解释为

#text

。（您可能会看到许多

#text

节点。）

您可能应该尝试访问，这会忽略不等于1的节点，例如文本元素

非常感谢您的博客帖子！真棒的讨论，让人大开眼界！在你的博客中，你提到了

prevelementsbibling

。应该是

previousElementSibling

@JamesMontagne-谢谢，我修正了输入错误。非常感谢你的博文！真棒的讨论，让人大开眼界！在你的博客中，你提到了

prevelementsbibling

。应该是

previousElementSibling

@JamesMontagne-谢谢，我修正了输入错误。