DOM 树中的这个节点“object Text”是什么？
我有一个 html/JS 文件，其中包含用于导航 DOM 树并报告有关当前正在访问的节点的信息的按钮。
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman"/>
<meta name="description" content="A simple example"/>
<style>
pre {border: medium double black;}
</style>
</head>
<body>
<pre id="results"></pre>
<p id="tblock">
There are lots of different kinds of fruit - there are over 500 varieties
of <span id="banana">banana</span> alone. By the time we add the countless
types of <span id="apple">apples</span>,
<span="orange">oranges</span="orange">, and other well-known fruit, we are
faced with thousands of choices.
</p>
<p>
One of the most interesting aspects of fruit is the variety available in
each country. I live near London, in an area which is known for
its apples.
</p>
<p>
<button id="parent">Parent</button>
<button id="child">First Child</button>
<button id="prev">Prev Sibling</button>
<button id="next">Next Sibling</button>
</p>
<script>
var resultsElem = document.getElementById("results");
var element = document.body;
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = handleButtonClick;
}
processNewElement(element);
function handleButtonClick(e) {
if (element.style) {
element.style.backgroundColor = "white";
}
if (e.target.id == "parent" && element != document.body) {
element = element.parentNode;
} else if (e.target.id == "child" && element.hasChildNodes()) {
element = element.firstChild;
} else if (e.target.id == "prev" && element.previousSibling) {
element = element.previousSibling;
} else if (e.target.id == "next" && element.nextSibling) {
element = element.nextSibling;
}
processNewElement(element);
if (element.style) {
element.style.backgroundColor = "lightgrey";
}
}
function processNewElement(elem) {
resultsElem.innerHTML = "Element type: " + elem + "\n";
resultsElem.innerHTML += "Element id: " + elem.id + "\n";
resultsElem.innerHTML += "Element text content: " + elem.wholeText + "\n";
resultsElem.innerHTML += "Has child nodes: "
+ elem.hasChildNodes() + "\n";
if (elem.previousSibling) {
resultsElem.innerHTML += ("Prev sibling is: "
+ elem.previousSibling + "\n");
} else {
resultsElem.innerHTML += "No prev sibling\n";
}
if (elem.nextSibling) {
resultsElem.innerHTML += "Next sibling is: "
+ elem.nextSibling + "\n";
} else {
resultsElem.innerHTML += "No next sibling\n";
}
}
</script>
</body>
</html>当我第一次单击“父级”按钮，然后单击“第一个子级”按钮时，它的输出将在帖子末尾给出。
节点“object Text”指的是什么？它代表元素的全部内容吗<body>？
节点“object Text”是一个Text节点吗？elem.wholeText鉴于节点是“对象文本”，为什么“元素文本内容”中不输出任何内容？
DOM 文档的每个部分通常称为“节点”，并且节点有不同的类型。文本节点不是元素，而是包含原始文本的文档的任何部分。
采取以下措施。你看到有多少个节点？
<p>Hello!</p>
有2.p元素节点和其中的文本节点作为它的firstChild。所有节点都有一个nodeValue属性，但令人惊讶的是，包含文本的元素节点没有nodeValue，它们的实际值驻留在作为元素节点的子节点的文本节点中。
<p>Hello!</p>
console.log(document.querySelector("p").nodeType); // 1
console.log(document.querySelector("p").nodeValue); // null
console.log(document.querySelector("p").firstChild.nodeType); // 3
console.log(document.querySelector("p").firstChild.nodeValue); // Hello!所有文本都将出现在某个元素内部，这意味着最自然出现的文本节点通常是由于源代码中包含的空白（回车符、制表符、空格）而创建的文本节点。
我在输出中添加了一行附加行来生成节点类型编号，您可以看到，当您单击“第一个子节点”按钮时，它会报告节点类型 3（文本节点），而不是单击“父节点”按钮时，产生 1（元素节点）。
<p>Hello!</p>| 归档时间： |
|
| 查看次数： |
669 次 |
| 最近记录： |