JavaScript - DOM 遷移

你好，未來的 JavaScript 巔峰大師！? 你準備好開始一段令人興奮的 DOM 遷移之旅了嗎？作為你友善的鄰居計算機科學老師，我非常高興能夠帶領你進行這次冒險。所以，拿起你的虛擬指南針，讓我們開始探索吧！

JavaScript - DOM Navigation

DOM 節點是什麼？

想像 DOM（文件對象模型）是你的網頁的家譜。這棵樹中的每個元素都稱為節點。就像真實的家庭一樣，這些節點彼此之間有關係——父母、子女和兄弟姐妹。酷炫吧？

我們來看一個簡單的例子：

<html>
<head>
<title>我的超棒網頁</title>
</head>
<body>
<h1>歡迎！</h1>
<p>這是一個段落。</p>
</body>
</html>

在這個“家庭”中，<html> 元素是曾祖父母，<head> 和 <body> 是它的子女，以此類推。這些元素中的每一個都是我們 DOM 樹中的節點。

HTML DOM 節點之間的關係

現在我們了解了節點是什麼，來探討一下它們是如何相互關聯的。在我們的 DOM 家譜樹中：

父節點有子節點
子節點有父節點
繁殖是具有相同父節點的節點

例如，在我們之前的 HTML 中：

<html> 是 <head> 和 <body> 的父節點
<head> 和 <body> 是兄弟姐妹
<h1> 和 <p> 是 <body> 的子女

使用 JavaScript 在節點之間導航

該戴上前瞻者的帽子了！? JavaScript 給我們提供了一些方便的工具來在這些節點之間導航。我們來深入了解一下！

訪問第一個子元素

要獲取一個元素的第一個子元素，我們使用 firstElementChild 屬性。這樣做：

let body = document.body;
let firstChild = body.firstElementChild;
console.log(firstChild.tagName); // 輸出：H1

在這個例子中，我們正在尋找 <body> 標籤的第一個子元素，那就是我們的 <h1> 元素。

訪問最後一個子元素

類似地，我們可以使用 lastElementChild 獲取最後一個子元素：

let body = document.body;
let lastChild = body.lastElementChild;
console.log(lastChild.tagName); // 輸出：P

在這裡，我們正在獲取 <body> 的最後一個子元素，那就是我們的 <p> 元素。

訪問 HTML 元素的所有子元素

想要看所有子元素？使用 children：

let body = document.body;
let allChildren = body.children;
for(let child of allChildren) {
console.log(child.tagName);
}
// 輸出：
// H1
// P

這段代碼遍歷 <body> 的所有子元素並記錄它們的標籤名。

訪問 HTML 元素的父節點

要找到節點的父親，我們使用 parentNode：

let heading = document.querySelector('h1');
let parent = heading.parentNode;
console.log(parent.tagName); // 輸出：BODY

在這裡，我們正在找到我們 <h1> 元素的父親，那就是 <body>。

訪問下一個兄弟節點

要找到下一個兄弟，使用 nextElementSibling：

let heading = document.querySelector('h1');
let nextSibling = heading.nextElementSibling;
console.log(nextSibling.tagName); // 輸出：P

這段代碼找到在我們的 <h1> 之後的兄弟，那就是 <p> 元素。

訪問前一個兄弟節點

對於前一個兄弟，使用 previousElementSibling：

let paragraph = document.querySelector('p');
let prevSibling = paragraph.previousElementSibling;
console.log(prevSibling.tagName); // 輸出：H1

在這裡，我們正在找到在我們的 <p> 之前兄弟，那就是 <h1>。

DOM 的根節點

每個家譜樹都有它的根，在 DOM 中，我們有三個主要的：

document.documentElement - 根元素（通常是 <html>）
document.head - <head> 元素
document.body - <body> 元素

console.log(document.documentElement.tagName); // 輸出：HTML
console.log(document.head.tagName); // 輸出：HEAD
console.log(document.body.tagName); // 輸出：BODY

DOM nodeName 屬性

每個節點都有一個名稱，我們可以通過 nodeName 屬性訪問它：

let heading = document.querySelector('h1');
console.log(heading.nodeName); // 輸出：H1

DOM nodeValue 屬性

nodeValue 屬性給我們節點的值。對於文本節點，這是文本內容：

let heading = document.querySelector('h1');
let textNode = heading.firstChild;
console.log(textNode.nodeValue); // 輸出：歡迎！

DOM 節點類型

不是所有的節點都是一樣的！DOM 中有不同類型的節點。這裡是主要的幾種：

節點類型	描述	nodeType 值
Element Node	任何 HTML 元素（如 `<p>`、`<div>` 等。）	1
Attribute Node	HTML 元素的屬性	2
Text Node	HTML 元素內的文本	3
Comment Node	HTML 註釋	8
Document Node	整個文件	9

DOM nodeType 屬性

我們可以使用 nodeType 屬性來確定我們正在處理的是哪種節點：

let element = document.querySelector('h1');
let textNode = element.firstChild;
let commentNode = document.createComment('這是一個註釋');

console.log(element.nodeType); // 輸出：1 (Element Node)
console.log(textNode.nodeType); // 輸出：3 (Text Node)
console.log(commentNode.nodeType); // 輸出：8 (Comment Node)

至此，各位！你已經像專家一樣導航 DOM。記住，熟能生巧，所以不要害怕嘗試這些概念。在你還沒有意識到之前，你將會比松鼠在堅果工廠還要快地在 DOM 樹中穿行！?️

快樂編程，願 DOM 與你同在！?

Credits: Image by storyset