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;

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

var headText = div.firstChild.firstChild.nodeValue;

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

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

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

Answer 1

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

如果您更改了HTML：

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

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

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

如何在DOM树中放置节点？

1 个答案: