JavaScript 操作 DOM

JavaScript 是一種高級腳本語言，用于瀏覽器環境中的動態交互性頁面開發。而 DOM（文檔對象模型）則是一種表述 HTML、XML 及 SVG 文檔的標準編程接口。

獲取元素

要操作 DOM，首先需要獲取頁面的元素?？梢允褂?document 對象及其屬性和方法來獲取元素。例如：

let myElement = document.getElementById("elementId");
let myElements = document.getElementsByClassName("className");
let myElements = document.getElementsByName("nameAttribute");
let myElements = document.getElementsByTagName("tagName");

這些方法會返回一個 NodeList 對象，如果只需要其中的一個元素，則可以使用索引來獲取，例如：

let myElement = document.getElementById("elementId");
let myFirstElement = myElement[0];

修改元素

一旦獲取了頁面元素，就可以通過 JavaScript 進行修改。例如，可以使用以下方法來更改元素的內容：

let myElement = document.getElementById("elementId");
myElement.innerHTML = "new HTML";

可以使用以下方法來更改元素的樣式：

let myElement = document.getElementById("elementId");
myElement.style.color = "red";

還可以使用以下方法來添加、刪除和更改元素的類：

let myElement = document.getElementById("elementId");
myElement.classList.add("newClass");
myElement.classList.remove("oldClass");
myElement.classList.toggle("toggleClass");
myElement.classList.replace("oldClass", "newClass");

添加元素

要在頁面上添加元素，可以使用以下方法：

let myElement = document.createElement("tagName");
let textNode = document.createTextNode("text");
myElement.appendChild(textNode);
document.body.appendChild(myElement);

這將創建一個新的元素，并將其作為一個子節點添加到一個現有元素中。要將它添加到頁面的末尾，可以將其添加到 body 元素或 HTML 元素上。

移動元素

可以使用以下方法將元素從一個位置移動到另一個位置：

let myElement = document.getElementById("elementId");
let myParentElement = document.getElementById("parentElementId");
myParentElement.insertBefore(myElement, myParentElement.childNodes[3]);

這將把元素移到父元素的第四個子節點的位置。

總結

通過 JavaScript 操作 DOM，可以修改、添加、移動和刪除頁面元素。這使開發人員能夠構建動態、可交互的網頁。