DOM 是什麼？
定義： DOM (Document Object Model) 是瀏覽器用於操作 HTML 或 XML 文件的編程介面。它將文檔解析為一個節點樹 (Node Tree)，每個節點代表文檔的一部分（標籤、屬性、文字等）。DOM 中的節點 (Node)
節點的主要類型
DOM 提供的節點集合
為了便於操作多個節點，DOM 提供了兩種節點集合：HTMLCollection 和 NodeList。
HTMLCollection
- 定義： HTMLCollection 是一種類陣列的物件，只包含 HTML 元素節點。
- 來源： 使用
document.getElementsByTagName()或document.getElementsByClassName()等方法時，返回 HTMLCollection。 - 特點：
- 動態特性：當 DOM 結構改變時，HTMLCollection 的內容會即時更新。
- 僅支援基本的迴圈 (
for)，不支援forEach或for...of（需轉陣列後支援）。
範例
const elements = document.getElementsByTagName('p'); // 返回 HTMLCollection
console.log(elements[0]); // 存取第一個 <p> 元素
console.log(elements.length); // 查看集合中元素的數量
NodeList
- 定義： NodeList 是一種類陣列的物件，可以包含多種類型的節點（元素、文字、註解等）。
- 來源：
- 使用
document.querySelectorAll()返回靜態的 NodeList。 - 使用
childNodes返回動態的 NodeList。
- 使用
- 特點：
- 靜態/動態：NodeList 可能是靜態的，也可能是動態的。
- 支援迭代：可以直接使用 forEach 或 for...of。
範例
const nodes = document.querySelectorAll('div'); // 返回靜態 NodeList
nodes.forEach(node => console.log(node)); // 使用 forEach 遍歷
HTMLCollection 與 NodeList 的比較
HTMLCollection 的動態特性
<div class="example">Item 1</div>
<div class="example">Item 2</div>
<button id="add">Add Item</button>
<script>
const elements = document.getElementsByClassName('example'); // HTMLCollection
console.log(elements.length); // 初始長度：2
document.getElementById('add').addEventListener('click', () => {
const newDiv = document.createElement('div');
newDiv.className = 'example';
newDiv.textContent = 'New Item';
document.body.appendChild(newDiv);
console.log(elements.length); // 動態更新：3
});
</script>
NodeList 的靜態特性
const nodes = document.querySelectorAll('.example'); // 靜態 NodeList
console.log(nodes.length); // 初始長度：2
document.getElementById('add').addEventListener('click', () => {
const newDiv = document.createElement('div');
newDiv.className = 'example';
newDiv.textContent = 'New Item';
document.body.appendChild(newDiv);
console.log(nodes.length); // 長度仍為：2
});
