JavaScript HTML DOM 導航
使用 HTML DOM，您可以透過節點關係在節點樹中導航。
DOM 節點
根據 W3C HTML DOM 標準，HTML 文件中的一切都是一個節點
- 整個文件是一個文件節點
- 每個 HTML 元素都是一個元素節點
- HTML 元素內的文字是文字節點
- 每個 HTML 屬性都是一個屬性節點（已棄用）
- 所有註釋都是註釋節點
使用 HTML DOM，節點樹中的所有節點都可以透過 JavaScript 訪問。
可以建立新節點，並且所有節點都可以被修改或刪除。
節點關係
節點樹中的節點之間存在層級關係。
術語父節點、子節點和同級節點用於描述這些關係。
- 在節點樹中，最頂層的節點稱為根（或根節點）
- 除了根節點（沒有父節點）之外，每個節點都有且僅有一個父節點
- 一個節點可以有多個子節點
- 同級節點（兄弟節點）是具有相同父節點的節點
<html>
<head>
<title>DOM 教程</title>
</head>
<body>
<h1>DOM 課程一</h1>
<p>Hello world!</p>
</body>
</html>
從上面的 HTML 中您可以讀到
<html>是根節點<html>沒有父節點<html>是<head>和<body>的父節點<head>是<html>的第一個子節點<body>是<html>的最後一個子節點
and
<head>有一個子節點：<title><title>有一個子節點（一個文字節點）：“DOM 教程”<body>有兩個子節點：<h1>和<p><h1>有一個子節點：“DOM 課程一”<p>有一個子節點：“Hello world!”<h1>和<p>是同級節點
節點間導航
您可以使用以下節點屬性透過 JavaScript 在節點之間進行導航
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
子節點和節點值
DOM 處理中的一個常見錯誤是期望元素節點包含文字。
示例
<title id="demo">DOM 教程</title>
元素節點 <title>（在上例中）不包含文字。
它包含一個文字節點，其值為“DOM 教程”。
可以透過節點的 innerHTML 屬性訪問文字節點的值
myTitle = document.getElementById("demo").innerHTML;
訪問 innerHTML 屬性與訪問第一個子節點的 nodeValue 相同
myTitle = document.getElementById("demo").firstChild.nodeValue;
訪問第一個子節點也可以這樣實現
myTitle = document.getElementById("demo").childNodes[0].nodeValue;
以下所有（3個）示例都檢索 <h1> 元素的文字，並將其複製到 <p> 元素中
示例
<html>
<body>
<h1 id="id01">我的第一個頁面</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>
</body>
</html>
自己動手試一試 »
示例
<html>
<body>
<h1 id="id01">我的第一個頁面</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
自己動手試一試 »
示例
<html>
<body>
<h1 id="id01">我的第一個頁面</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
自己動手試一試 »
innerHTML
在本教程中，我們使用 innerHTML 屬性來檢索 HTML 元素的內容。
但是，學習上面的其他方法對於理解樹結構和 DOM 導航非常有用。
DOM 根節點
有兩個特殊屬性可以訪問整個文件
document.body- 文件的 bodydocument.documentElement- 整個文件
示例
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>顯示 document.body</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.body.innerHTML;
</script>
</body>
</html>
自己動手試一試 »
示例
<html>
<body>
<h2>JavaScript HTMLDOM</h2>
<p>顯示 document.documentElement</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = document.documentElement.innerHTML;
</script>
</body>
</html>
自己動手試一試 »
nodeName 屬性
該 nodeName 屬性指定節點的名稱。
- nodeName 是隻讀的
- 元素節點的 nodeName 與標籤名相同
- 屬性節點的 nodeName 是屬性名
- 文字節點的 nodeName 始終是 #text
- 文件節點的 nodeName 始終是 #document
示例
<h1 id="id01">我的第一個頁面</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>
自己動手試一試 »
注意：nodeName 始終包含 HTML 元素的大寫標籤名。
nodeValue 屬性
該 nodeValue 屬性指定節點的值。
- 元素節點的 nodeValue 為
null - 文字節點的 nodeValue 是文字本身
- 屬性節點的 nodeValue 是屬性值
nodeType 屬性
該 nodeType 屬性是隻讀的。它返回節點的型別。
示例
<h1 id="id01">我的第一個頁面</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>
自己動手試一試 »
最重要的 nodeType 屬性是
| 節點 | 型別 | 示例 |
|---|---|---|
| ELEMENT_NODE | 1 | <h1 class="heading">W3Schools</h1> |
| ATTRIBUTE_NODE | 2 | class = "heading"（已棄用） |
| TEXT_NODE | 3 | W3Schools |
| COMMENT_NODE | 8 | <!-- 這是一個註釋 --> |
| DOCUMENT_NODE | 9 | HTML 文件本身（<html> 的父節點） |
| DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
在 HTML DOM 中，型別 2 已棄用（但仍可工作）。它在 XML DOM 中並未棄用。
