随着HTML DOM，您可以使用节点的关系导航节点树。
DOM节点
根据W3C HTML DOM标准，一切HTML文档中的一个节点：
- 整个文档是文档节点
- 每一个HTML元素是元素节点
- HTML元素中的文本是文本节点
- 每个HTML属性是一个属性节点
- 所有评论都是注释节点
与HTML DOM，在节点树中的所有节点都可以通过JavaScript访问。
新节点可以被创建，并且所有节点都可以被修改或删除。
节点的关系
在节点树中的节点必须彼此的层级关系。
术语父母，子女，兄弟姐妹和用于描述该关系。
- 在节点树中，顶节点被称为根（或根节点）
- 每个节点都只有一个父亲，除了根（它没有父）
- 一个节点可以有一些儿童
- 兄弟姐妹（兄弟或姐妹）拥有相同的父节点
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
从上面的HTML你可以阅读：
- <html>是根节点
- <html>没有父母
- <html>是父<head>和<body>
- <head>是第一个孩子<html>
- <body>是最后一个子<html>
和：
- <head>有一个子： <title>
- <title>有一个子元素（文本节点）：“DOM教程”
- <body>有两个孩子<h1>和<p>
- <h1>有一个孩子：“DOM第一课”
- <p>有一个孩子：“世界，你好！”
- <h1>和<p>是兄弟
导航节点间
您可以使用以下节点属性用JavaScript节点之间导航：
- parentNode
- childNodes[ nodenumber ]
- firstChild
- lastChild
- nextSibling
- previousSibling
警告 ！
在DOM处理一个常见的错误是期望包含文字元素节点。
在这个例子中：<title> DOM教程</title>元素节点<title>不包含文本。它包含值“DOM教程”一文节点 。
文本节点的值可以由该节点的被访问innerHTML属性或nodeValue 。
Child节点和节点值
除了innerHTML属性，您还可以使用childNodes和nodeValue属性来获得元素的内容。
下面的示例收集了的节点值<h1>元素，并将其复制到<p>元素：
例
<html>
<body>
<h1 id="intro">My First Page</h1>
<p id="demo">Hello!</p>
<script>
var myText =
document.getElementById("intro").childNodes[0].nodeValue;
document.getElementById("demo").innerHTML =
myText;
</script>
</body>
</html> 试一试» 在上面的例子中， getElementById是一种方法，而childNodes和nodeValue是属性。
在本教程中，我们使用innerHTML属性。 然而，学习上述方法对于理解树结构和DOM的导航有用的。
使用firstChild属性是相同的使用childNodes[0]
例
<html>
<body>
<h1 id="intro">My First Page</h1>
<p id="demo">Hello World!</p>
<script>
myText = document.getElementById("intro").firstChild.nodeValue;
document.getElementById("demo").innerHTML = myText;
</script>
</body>
</html> 试一试» DOM根节点
有两个特殊的属性，允许访问完整的文档：
- document.body -文档的主体
- document.documentElement -该文件全文
例
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.body</b> property.</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html> 试一试» 例
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>document.documentElement</b> property.</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html> 试一试» 该nodeName属性
该nodeName属性指定节点的名称。
- nodeName为只读
- nodeName元素节点的相同标签名
- nodeName属性节点是属性名称
- nodeName文本节点的永远是#text
- nodeName的文档节点的是总是#document
注意： nodeName总是包含HTML元素的大写标签名。
该nodeValue属性
该nodeValue属性指定节点的值。
- nodeValue元素节点是未定义
- nodeValue对于文本节点是文本本身
- nodeValue为属性节点是属性值
该nodeType物业
该nodeType属性返回节点的类型。 nodeType是只读的。
最重要的节点类型是：
| 元素类型 | 的NodeType |
|---|---|
| Element | 1 |
| Attribute | 2 |
| Text | 3 |
| Comment | 8 |
| Document | 9 |