srcmini上一章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); // : #text
var 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); // : #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>文本段落.</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);
</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 | 文档类型节点，例如<!用于HTML5文档的DOCTYPE html>。 |
评论前必须登录！
注册