隨著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 |