如何在 javascript 中使用 dom: 使用 dom(文檔對(duì)象模型)在 javascript 中操作 html/xml 文檔。具體步驟包括:獲取元素、操作元素、創(chuàng)建新元素、插入/移除元素,以及遍歷 dom 樹(shù)。
如何在 JavaScript 中使用 DOM
JavaScript 中的 DOM(文檔對(duì)象模型)是一個(gè)用于表示和操作 HTML 和 XML 文檔的對(duì)象。它允許開(kāi)發(fā)者以編程方式訪問(wèn)和修改網(wǎng)頁(yè)內(nèi)容。
使用 DOM 的步驟:
1. 獲取 DOM 元素
使用 document.getElementById() 或 document.querySelector() 方法獲取特定元素。
const element = document.getElementById("my-element");
登錄后復(fù)制
2. 操作元素
使用屬性和方法來(lái)修改元素的內(nèi)容、樣式和行為。
innerHTML: 設(shè)置或獲取元素的 HTML 內(nèi)容。
style: 設(shè)置或獲取元素的 CSS 樣式。
className: 設(shè)置或獲取元素的類(lèi)名。
addEventListener(): 為元素添加事件監(jiān)聽(tīng)器。
3. 創(chuàng)建新元素
使用 document.createElement() 方法創(chuàng)建新的 HTML 元素。
const newElement = document.createElement("p"); newElement.innerHTML = "Hello World!";
登錄后復(fù)制
4. 插入和移除元素
使用 appendChild() 和 removeChild() 方法將元素插入或移除文檔。
5. 遍歷 DOM
使用 childNodes、parentNode 和 nextSibling 屬性遍歷 DOM 樹(shù)。
示例:
修改具有 ID 為 “my-element” 的元素的文本內(nèi)容:
const element = document.getElementById("my-element"); element.innerHTML = "Updated Content";
登錄后復(fù)制
添加一個(gè) “active” 類(lèi)到具有類(lèi)名 “button” 的所有元素:
const buttons = document.querySelectorAll(".button"); buttons.forEach((button) => button.classList.add("active"));
登錄后復(fù)制