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

【问题标题】：How are nodes laid within the DOM tree?节点是如何放置在 DOM 树中的？
【发布时间】：2015-01-28 14:13:48
【问题描述】：

我正在学习 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');

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

虽然这行给出了正确的答案，但它的表述却出人意料：

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

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

var headText = div.firstChild.firstChild.nodeValue;

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

div.firstChild应该返回H1。
div.firstChild.firstChild应该返回H1的Text节点。
div.firstChild.firstChild.nodeValue应该返回Text节点的值。

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

【问题讨论】：

需要注意的是，从 HTML 构建 DOM 的机制与 JavaScript 完全没有关系。

标签： javascript dom

【解决方案1】：

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

如果您更改了 HTML：

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

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

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

【讨论】：