JavaScript DOM 导航
在本教程中，您将学习如何在 JavaScript 中的 DOM 节点之间导航。
在 DOM 节点之间导航
在前面的章节中，您已经学习了如何选择网页上的单个元素。 但在很多情况下，您需要访问子元素、父元素或祖先元素。 请参阅 JavaScript DOM 节点 章节，了解 DOM 树中节点之间的逻辑关系。
DOM 节点提供了几个属性和方法，允许您导航或遍历 DOM 的树结构并非常轻松地进行更改。 在下一节中，我们将学习如何使用 JavaScript 在 DOM 树中向上、向下和横向导航。
访问子节点
您可以使用 DOM 节点的 firstChild 和 lastChild 属性分别访问节点的第一个和最后一个直接 子节点。 如果节点没有任何子元素，则返回 null。
<div id="main">
<h1 id="title">My Heading</h1>
<p id="hint"><span>This is some text.</span></p>
</div>
<script>
var main = document.getElementById("main");
console.log(main.firstChild.nodeName); // Prints: #text
var hint = document.getElementById("hint");
console.log(hint.firstChild.nodeName); // Prints: SPAN
</script>注意： nodeName 是一个只读属性，它以字符串形式返回当前节点的名称。 例如，它返回元素节点的标签名称，#text 为文本节点，#comment 为注释节点，#document 为文档节点，等等。
如果您注意到上面的示例，主 DIV 元素的第一个子节点的 nodeName 返回 #text 而不是 H1。 因为，空格、制表符、换行符等空格是有效字符，它们形成#text 节点并成为 DOM 树的一部分。 因此，由于 <div> 标签在 <h1> 标签之前包含一个换行符，所以它会创建一个#text 节点。
为避免 firstChild 和 lastChild 返回 #text 或 #comment 节点的问题，您也可以使用 firstElementChild 和 lastElementChild 属性分别仅返回第一个和最后一个 元素节点。 但是，它不适用于 IE 9 及更早版本。
<div id="main">
<h1 id="title">My Heading</h1>
<p id="hint"><span>This is some text.</span></p>
</div>
<script>
var main = document.getElementById("main");
alert(main.firstElementChild.nodeName); // 输出： H1
main.firstElementChild.style.color = "red";
var hint = document.getElementById("hint");
alert(hint.firstElementChild.nodeName); // 输出： SPAN
hint.firstElementChild.style.color = "blue";
</script>同样，您可以使用 childNodes 属性访问给定元素的所有子节点，其中第一个子节点的索引为 0。下面是一个示例：
<div id="main">
<h1 id="title">My Heading</h1>
<p id="hint"><span>This is some text.</span></p>
</div>
<script>
var main = document.getElementById("main");
// 首先检查元素是否有子节点
if(main.hasChildNodes()) {
var nodes = main.childNodes;
// 循环遍历节点列表并显示节点名称
for(var i = 0; i < nodes.length; i++) {
alert(nodes[i].nodeName);
}
}
</script>childNodes 返回所有子节点，包括文本和注释节点等非元素节点。 要获取仅包含元素的集合，请改用 children 属性。
<div id="main">
<h1 id="title">My Heading</h1>
<p id="hint"><span>This is some text.</span></p>
</div>
<script>
var main = document.getElementById("main");
// 首先检查元素是否有子节点
if(main.hasChildNodes()) {
var nodes = main.children;
// 循环遍历节点列表并显示节点名称
for(var i = 0; i < nodes.length; i++) {
alert(nodes[i].nodeName);
}
}
</script>访问父节点
您可以使用 parentNode 属性来访问 DOM 树中指定节点的父节点。
parentNode 将始终为文档节点返回 null，因为它没有父节点。
<div id="main">
<h1 id="title">My Heading</h1>
<p id="hint"><span>This is some text.</span></p>
</div>
<script>
var hint = document.getElementById("hint");
alert(hint.parentNode.nodeName); // 输出： DIV
alert(document.documentElement.parentNode.nodeName); // 输出： #document
alert(document.parentNode); // 输出： null
</script>但是，如果您只想获取元素节点，您可以使用 parentElement，如下所示：
<div id="main">
<h1 id="title">My Heading</h1>
<p id="hint"><span>This is some text.</span></p>
</div>
<script>
var hint = document.getElementById("hint");
alert(hint.parentNode.nodeName); // 输出： DIV
hint.parentNode.style.backgroundColor = "yellow";
</script>访问同级节点
您可以使用 previousSibling 和 nextSibling 属性分别访问 DOM 树中的上一个和下一个节点。 这是一个例子：
<div id="main">
<h1 id="title">My Heading</h1>
<p id="hint"><span>This is some text.</span></p><hr>
</div>
<script>
var title = document.getElementById("title");
alert(title.previousSibling.nodeName); // 输出： #text
var hint = document.getElementById("hint");
alert(hint.nextSibling.nodeName); // 输出： HR
</script>或者，您可以使用 previousElementSibling 和 nextElementSibling 来获取跳过任何空白文本节点的上一个和下一个兄弟元素。 如果没有兄弟元素，所有这些属性都返回 null。 这是一个例子：
<div id="main">
<h1 id="title">My Heading</h1>
<p id="hint"><span>This is some text.</span></p>
</div>
<script>
var hint = document.getElementById("hint");
alert(hint.previousElementSibling.nodeName); // 输出： H1
alert(hint.previousElementSibling.textContent); // 输出： My Heading
var title = document.getElementById("title");
alert(title.nextElementSibling.nodeName); // 输出： P
alert(title.nextElementSibling.textContent); // 输出： This is some text.
</script>textContent 属性表示节点及其所有后代的文本内容。 请参阅 JavaScript DOM 操作 章节了解更多信息。
DOM 节点的类型
DOM 树由不同类型的节点组成，例如元素、文本、评论等。
每个节点都有一个 nodeType 属性，您可以使用它来找出您正在处理的节点类型。 下表列出了最重要的节点类型：
| 常量 | 值 | 说明 |
|---|---|---|
ELEMENT_NODE |
1 | 一个元素节点，例如 <p> 或 <img>。 |
TEXT_NODE |
3 | 元素的实际文本。 |
COMMENT_NODE |
8 | 一个注释节点，即 <!-- 一些注释 --> |
DOCUMENT_NODE |
9 | 一个文档节点，即 <html> 元素的父节点。。 |
DOCUMENT_TYPE_NODE |
10 | 文档类型节点，例如 <!DOCTYPE html> 用于 HTML5 文档。 |