JavaScript - DOM 節點清單

DOM 節點清單介紹

你好啊，有志於網頁開發的各位！今天，我們將踏上一段令人興奮的旅程，進入 JavaScript DOM 節點清單的世界。別擔心如果你是編程新手——我將成為你親切導遊，我們會一步一步地學習。到了這個教學的結尾，你將能像專業人士一樣操縱網頁！

JavaScript - DOM Node Lists

DOM 節點清單是什麼？

在我們深入之前，讓我們從基礎開始。想像一個網頁就像是一個家族樹。DOM（文件對象模型）就像是網頁的家族樹。頁面上的每一個元素——無論是一個段落、一個按鈕還是一張圖片——都是這個家族的一員，或者用專業術語來說，是一個「節點」。

節點清單簡單來說就是這些節點的集合。這就像是一個派對的客人名單，其中每位客人都是你網頁中的一個元素。

範例 1：獲取節點清單

讓我們看一個簡單的範例：

<div>
<p>段落 1</p>
<p>段落 2</p>
<p>段落 3</p>
</div>

<script>
let paragraphs = document.querySelectorAll('p');
console.log(paragraphs);
</script>

在這個範例中，querySelectorAll('p') 返回一個包含所有 <p> 元素的節點清單。如果你在瀏覽器的控制台運行這段代碼，你會看到類似於以下內容：

NodeList(3) [p, p, p]

這告訴我們我們有一個包含三個段落元素的節點清單。

使用節點清單

現在我們有了節點清單，讓我們看看我們能做些什麼！

範例 2：遍歷節點清單

let paragraphs = document.querySelectorAll('p');

paragraphs.forEach((paragraph, index) => {
console.log(`段落 ${index + 1}: ${paragraph.textContent}`);
});

這段代碼將輸出：

段落 1: 段落 1
段落 2: 段落 2
段落 3: 段落 3

在這裡，我們使用 forEach 方法來遍歷我們節點清單中的每個段落。這就像是我們在派對的客人名單中逐個問候每位客人！

魔法：動態節點清單與靜態節點清單

現在，我們來看看有點意思的地方。節點清單可以是「動態」的或「靜態」的。

一個動態節點清單就像是一個神奇的客人名單，當人們到達或離開派對時，它會自動更新。相比之下，靜態節點清單就像是在某一特定時刻客人名單的快照——即使有新客人到達，它也不會變化。

範例 3：動態節點清單

<ul id="guestList">
<li>Alice</li>
<li>Bob</li>
</ul>

<script>
let guests = document.getElementsByTagName('li');
console.log(guests.length); // 輸出：2

let newGuest = document.createElement('li');
newGuest.textContent = 'Charlie';
document.getElementById('guestList').appendChild(newGuest);

console.log(guests.length); // 輸出：3
</script>

在這個範例中，getElementsByTagName 返回一個動態節點清單。當我們添加 Charlie 時，我們的 guests 節點清單會自動更新！

範例 4：靜態節點清單

<ul id="guestList">
<li>Alice</li>
<li>Bob</li>
</ul>

<script>
let guests = document.querySelectorAll('li');
console.log(guests.length); // 輸出：2

let newGuest = document.createElement('li');
newGuest.textContent = 'Charlie';
document.getElementById('guestList').appendChild(newGuest);

console.log(guests.length); // 仍然輸出：2
</script>

在這裡，querySelectorAll 返回一個靜態節點清單。即使在添加 Charlie 之後，我們的 guests 節點清單也不會變化。這就像是我們拍了客人名單的照片，即使有新客人到達，照片也不會更新。

HTMLCollection 與 NodeList 的差異

現在，讓我們來談談 DOM 家庭中的兩位表親：HTMLCollection 和 NodeList。它們很相似，但它們有自己的獨特特點。

HTMLCollection

HTMLCollection 總是動態的。它就像是一個不斷更新的客人名單。

let divs = document.getElementsByTagName('div'); // 返回 HTMLCollection

NodeList

NodeList 可以是動態的或靜態的，取決於它是如何創建的。

let paragraphs = document.querySelectorAll('p'); // 返回靜態 NodeList
let childNodes = document.body.childNodes; // 返回動態 NodeList

這裡有一個表格總結它們的差異：

特性	HTMLCollection	NodeList
動態/靜態	總是動態	可動態或靜態
內容	只有元素節點	可以包括所有節點類型
訪問項目	通过名稱、id 或索引	只能通过索引
forEach 方法	不可用	可用

結論

好了，各位！我們已經穿越了 DOM 節點清單的土地，從基本概念到動態和靜態列表的微妙差異。記住，熟練需要練習。嘗試這些範例，對它們進行實驗，很快你就能像有經驗的開發者一樣操縱網頁！

在我們分道揚镳之前，這裡有一個給網頁開發者的小笑話：為什麼 JavaScript 開發者戴眼鏡？因為他看不到 C#!（懂了嗎？C Sharp？好吧，我自己出去吧...）

繼續編碼，持續學習，最重要的是，繼續在 JavaScript 中找到樂趣！

Credits: Image by storyset