JavaScript 操作 DOM

JavaScript 是一種高級(jí)腳本語(yǔ)言，用于瀏覽器環(huán)境中的動(dòng)態(tài)交互性頁(yè)面開發(fā)。而 DOM（文檔對(duì)象模型）則是一種表述 HTML、XML 及 SVG 文檔的標(biāo)準(zhǔn)編程接口。

獲取元素

要操作 DOM，首先需要獲取頁(yè)面的元素?？梢允褂?document 對(duì)象及其屬性和方法來(lái)獲取元素。例如：

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

這些方法會(huì)返回一個(gè) NodeList 對(duì)象，如果只需要其中的一個(gè)元素，則可以使用索引來(lái)獲取，例如：

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

修改元素

一旦獲取了頁(yè)面元素，就可以通過 JavaScript 進(jìn)行修改。例如，可以使用以下方法來(lái)更改元素的內(nèi)容：

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

可以使用以下方法來(lái)更改元素的樣式：

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

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

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

添加元素

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

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

這將創(chuàng)建一個(gè)新的元素，并將其作為一個(gè)子節(jié)點(diǎn)添加到一個(gè)現(xiàn)有元素中。要將它添加到頁(yè)面的末尾，可以將其添加到 body 元素或 HTML 元素上。

移動(dòng)元素

可以使用以下方法將元素從一個(gè)位置移動(dòng)到另一個(gè)位置：

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

這將把元素移到父元素的第四個(gè)子節(jié)點(diǎn)的位置。

總結(jié)

通過 JavaScript 操作 DOM，可以修改、添加、移動(dòng)和刪除頁(yè)面元素。這使開發(fā)人員能夠構(gòu)建動(dòng)態(tài)、可交互的網(wǎng)頁(yè)。