如何在 JavaScript 中使用 DOM

JavaScript 中的 DOM（文檔對象模型）是一個用于表示和操作 HTML 和 XML 文檔的對象。它允許開發者以編程方式訪問和修改網頁內容。

使用 DOM 的步驟：

1. 獲取 DOM 元素

使用 document.getElementById() 或 document.querySelector() 方法獲取特定元素。

const element = document.getElementById("my-element");

2. 操作元素

使用屬性和方法來修改元素的內容、樣式和行為。

innerHTML: 設置或獲取元素的 HTML 內容。

style: 設置或獲取元素的 CSS 樣式。

className: 設置或獲取元素的類名。

addEventListener(): 為元素添加事件監聽器。

3. 創建新元素

使用 document.createElement() 方法創建新的 HTML 元素。

const newElement = document.createElement("p");
newElement.innerHTML = "Hello World!";

4. 插入和移除元素

使用 appendChild() 和 removeChild() 方法將元素插入或移除文檔。

5. 遍歷 DOM

使用 childNodes、parentNode 和 nextSibling 屬性遍歷 DOM 樹。

示例：

修改具有 ID 為 “my-element” 的元素的文本內容：

const element = document.getElementById("my-element");
element.innerHTML = "Updated Content";

添加一個 “active” 類到具有類名 “button” 的所有元素：

const buttons = document.querySelectorAll(".button");
buttons.forEach((button) => button.classList.add("active"));