DOM 树中的节点是如何放置的？

Question

我在学习JavaScript。我是文档对象模型主题的新手 (DOM)。

我对 DOM 树中的节点如何放置感到困惑？

我使用了这个 HTML 文件。

<html>
<body>

<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>

<ul>
<li id="one"><em>emText</em>directText</li>
</ul>

</div>

<div id='TDiv'>
<h1 id='travelhead'>headText</h1>
</div>

<script src="javac.js"></script>
</body>
</html>

我使用了这个 JavaScript 文件。

var li = document.getElementById('one');

var emText = li.firstChild.firstChild.nodeValue;
var directText = li.firstChild.nextSibling.nodeValue;

document.write(emText + '<br />');
document.write(directText + '<br />');

var div = document.getElementById('TDiv');
var headText = div.firstChild.nextSibling.firstChild.nodeValue;
document.write(headText);

两个变量：

var li = document.getElementById('one');
var div = document.getElementById('TDiv');

保存 li 元素节点和 div 元素节点在 DOM 树中的位置。

虽然这行给出了正确的答案，但它的公式出乎意料：

var headText = div.firstChild.nextSibling.firstChild.nodeValue;

用于获取DIV节点元素内H1节点元素内文本节点的文本值。所以我希望它是这样写的：

var headText = div.firstChild.firstChild.nodeValue;

DIV 有 H1 作为第一个子节点，而 H1 有 Text 节点的第一个子节点。

div.firstChild 应该 returns H1.
div.firstChild.firstChild 应该 returns H1 的文本节点。
div.firstChild.firstChild.nodeValue 应该 returns 文本节点的值。

这些节点是如何真正放置在 DOM 树中的？！

Answer 1

<div> 和 <h1> 之间有空格 - 换行符。这将（或可能）变成一个文本节点。

如果您更改了 HTML：

<div id='TDiv'><h1 id='travelhead'>headText</h1></div>

那么 DOM 将不会有那个额外的文本节点。

这很好地说明了为什么 JavaScript 代码期望来自 HTML 文档的特定结构是一个糟糕的主意。

DOM 树中的节点是如何放置的？

How are nodes laid within the DOM tree?

javascript

dom