JavaScript 作為一種流行的腳本語言，常被用于修改 HTML 文檔的 DOM 結構，包括添加、刪除、替換或修改元素的屬性值等。這種改變 DOM 的能力讓 JavaScript 成為 web 開發中不可缺少的一部分。下面就來看看使用 JavaScript 如何改變 DOM。

1. 通過 getElementById 方法獲取元素

let element = document.getElementById("example");
element.innerHTML = "Hello, World!";

這個例子中，我們使用了 document 對象的 getElementById 方法，通過傳入元素的 ID（在 HTML 中以 id 屬性定義），獲取了指定的元素。然后，我們通過修改元素的 innerHTML 屬性來改變元素的內容。

2. 通過 getElementsByTagName 方法獲取元素

let elements = document.getElementsByTagName("p");
for (let i = 0; i< elements.length; i++) {
elements[i].style.color = "red";
}

這個例子中，我們使用了 document 對象的 getElementsByTagName 方法，通過傳入標簽名（如 "p"）獲取了所有指定標簽的元素，并通過遍歷所有元素，修改了它們的樣式。

3. 通過 querySelector 方法獲取元素

let element = document.querySelector("#example .item");
element.classList.add("active");

這個例子中，我們使用了 document 對象的 querySelector 方法，通過傳入 CSS 選擇器（如 "#example .item"）選取了指定的元素，并通過修改元素的 classList 屬性來添加類名（"active"）。

4. 創建新元素

let element = document.createElement("div");
element.innerHTML = "New Element";
document.body.appendChild(element);

這個例子中，我們使用了 document 對象的 createElement 方法創建了新的 div 元素，并通過修改其 innerHTML 屬性添加了內容。然后，我們通過調用 document.body 的 appendChild 方法，將新創建的元素添加到文檔中。

5. 刪除元素

let element = document.getElementById("example");
element.parentNode.removeChild(element);

這個例子中，我們使用了 document 對象的 getElementById 方法，通過傳入元素的 ID 獲取了要刪除的元素，并通過調用 parentNode 的 removeChild 方法，將其從文檔中移除。

6. 替換元素

let element = document.createElement("p");
element.innerHTML = "New Text";
document.getElementById("example").replaceWith(element);

這個例子中，我們創建了一個新的 p 元素，并設置其 innerHTML 屬性。然后，我們調用 getElementById 方法選取要替換的元素（id 為 "example" 的元素），并通過調用 replaceWith 方法，將其替換成新創建的元素。

總結：

JavaScript 提供了多種方法用于改變 DOM，這些方法包括獲取元素、創建新元素、刪除元素、替換元素等。合理使用這些方法可以讓我們輕松實現 web 開發中的各種功能。在編寫 JavaScript 代碼時，要注意避免頻繁的 DOM 操作，以提高代碼效率。