JS學習筆記#13 | DOM (Document Object Model)

undefined on Tenor

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
});