了解 JavaScript 中的 DOM 操作：初學者指南

本初學者指南探討了 JavaScript 的文件物件模型 (DOM) 操作，這是一種用於建立互動式網頁的強大技術。 我們將介紹基礎知識，使您能夠將靜態內容轉變為動態、引人入勝的體驗。

---

理解 DOM

DOM 是一個程式設計接口，將 HTML 文件表示為物件的樹狀結構。 將其視為一棵家譜： 標籤是根，分支為 和 ，進一步分支為其他元素，如 <title></title>、<div> 和 <code><p></p>。 JavaScript 可讓您存取、修改、新增、刪除和重新排列這些元素。

---

為什麼要學 DOM 操作？

1. 動態內容：根據使用者操作更新網頁內容（文字、圖片）。
2. 互動功能：建立模態框、下拉式選單和滑桿等元素。
3. 事件處理：響應使用者輸入（點擊、按鍵、滑鼠移動）。

---

存取 DOM 元素

選擇元素是第一步。 JavaScript 提供了幾種方法：

1.透過ID

const element = document.getElementById('myId');

2.依類別名稱

const elements = document.getElementsByClassName('myClass');

3.依標籤名稱

const paragraphs = document.getElementsByTagName('p');

4.使用 CSS 選擇器 (querySelector/querySelectorAll)

const firstElement = document.querySelector('.myClass'); // First element matching the selector
const allElements = document.querySelectorAll('.myClass'); // All matching elements

---

常見的 DOM 操作

1.更改內容

修改元素文字或 HTML：

- 文字內容：

document.getElementById('example').textContent = 'New Text';

- HTML 內容：

document.getElementById('example').innerHTML = '<b>Bold Text</b>';

2.更改屬性

更新或新增元素屬性：

const image = document.querySelector('img');
image.setAttribute('src', 'newImage.jpg');
image.setAttribute('alt', 'New Description');

3.修改樣式

使用 .style 或 CSS 類別來變更元素外觀：

const box = document.getElementById('box');
box.style.backgroundColor = 'blue';
box.style.color = 'white';

box.classList.add('active');
box.classList.remove('inactive');
box.classList.toggle('highlight');

4.新增和刪除元素

動態建立與操作元素：

- 建立並追加：

const newDiv = document.createElement('div');
newDiv.textContent = 'I am a new div!';
document.body.appendChild(newDiv);

- 刪除元素：

const element = document.getElementById('removeMe');
element.remove();

---

事件處理

將 DOM 操作與事件監聽器結合來回應使用者操作。

範例：點選按鈕

（為簡潔起見，省略了範例程式碼，但將包括向按鈕元素新增事件偵聽器。）

常見事件： click、mouseover、keydown 等

---

DOM 遍歷

使用 .parentNode、.parentElement、.children、.childNodes、.nextElementSibling 和 .previousElementSibling 等屬性導航 DOM 樹以存取相關元素。

---

效能提示

• 最小化 DOM 存取：將元素引用儲存在變數中以供重用。
• 批次更新：使用documentFragment高效添加多個元素。
• 避免過多innerHTML：使用createElement以獲得更好的性能和安全性。

---

結論

DOM 操作對於現代 Web 開發至關重要。掌握這些技術可以讓您建立動態且引人入勝的使用者介面。 從簡單的專案開始，逐步探索更進階的概念。