JS DOM节点导航 – JavaScript教程 JSDOM节点导航|JavaScript

上一章JavaScript教程请查看：JS DOM操作
在本教程中，你将学习如何使用JavaScript在DOM节点之间导航。
在DOM节点之间导航在前几章中，你已经学习了如何在web页面上选择单个元素。但是在很多情况下，你需要访问子元素、父元素或祖先元素。要理解DOM树中节点之间的逻辑关系，请参阅JavaScript DOM节点一章。
DOM节点提供了几个属性和方法，允许你在DOM的树结构中导航或遍历，并非常容易地进行更改。在下一节中，我们将学习如何使用JavaScript在DOM树中向上、向下和横向导航。
访问子节点可以使用DOM节点的firstChild和lastChild属性分别访问节点的第一个和最后一个直接子节点，如果节点没有任何子元素，则返回null。

< div id="main"> < h1 id="title">My Heading< /h1> < p id="hint">< span>文本段落.< /span>< /p> < /div>< script> var main = document.getElementById("main"); console.log(main.firstChild.nodeName); // : #textvar hint = document.getElementById("hint"); console.log(hint.firstChild.nodeName); // : SPAN < /script>

注意：nodeName是一个只读属性，它以字符串的形式返回当前节点的名称。例如，它为元素节点返回标记名，为文本节点返回#text，为注释节点返回#comment，为文档节点返回#document，等等。
如果你注意到上面的示例，那么主DIV元素的第一个子节点的节点名将返回#text，而不是H1。因为，空格、制表符、换行符等空格是有效字符，它们形成#text节点并成为DOM树的一部分。因此，由于< div>标记在< h1>标记之前包含一个换行符，所以它将创建一个#text节点。
为了避免firstChild和lastChild返回#text或#comment节点的问题，你可以选择使用firstElementChild和lastElementChild属性分别返回第一个和最后一个元素节点。但是，它不能在ie9或更早的版本中工作。

< div id="main"> < h1 id="title">My Heading< /h1> < p id="hint">< span>文本段落.< /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>文本段落.< /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返回所有的子节点，包括像text和comment节点这样的非元素节点。若要获取仅包含元素的集合，请使用children属性。

< div id="main"> < h1 id="title">My Heading< /h1> < p id="hint">< span>文本段落.< /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>文本段落.< /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>

提示：最顶层的DOM树节点可以作为文档属性直接访问。例如，可以通过document.documentElement访问< html>元素，而< head>元素可以通过document.head 访问，可以通过document.body访问< body>元素。
但是，如果你只想获得元素节点，那么可以使用parentElement，如下所示:

< div id="main"> < h1 id="title">My Heading< /h1> < p id="hint">< span>文本段落.< /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>文本段落.< /span>< /p>< hr> < /div>< script> var title = document.getElementById("title"); alert(title.previousSibling.nodeName); // : #textvar 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>文本段落.< /span>< /p> < /div>< script> var hint = document.getElementById("hint"); alert(hint.previousElementSibling.nodeName); // : H1 alert(hint.previousElementSibling.textContent); // : My Headingvar title = document.getElementById("title"); alert(title.nextElementSibling.nodeName); // : P alert(title.nextElementSibling.textContent); < /script>

textContent属性表示节点及其所有后代的文本内容。有关它的更多信息，请参见JavaScript DOM操作一章。
DOM节点的类型DOM树由不同类型的节点组成，如元素、文本、注释等。
【JS DOM节点导航 – JavaScript教程】每个节点都有一个nodeType属性，你可以使用它来查找正在处理的节点的类型。下表列出了最重要的节点类型:

常量	值	描述
ELEMENT_NODE	1	元素节点，如< p> 或< img> 。
TEXT_NODE	3	元素的实际文本。
COMMENT_NODE	8	一个注释节点，即< !– 注释 – >
DOCUMENT_NODE	9	一个文档节点，即< html> 元素的父节点。
DOCUMENT_TYPE_NODE	10	文档类型节点，例如< !用于HTML5文档的DOCTYPE html> 。