如何在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');

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

虽然这条线给出了正确的答案，但它却意外地制定了：

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

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

var headText = div.firstChild.firstChild.nodeValue;

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

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

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

Answer 1

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

如果您更改了HTML：

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

然后DOM将没有额外的文本节点。

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