JavaScript DOM操作有哪些方法

小樊
81
2024-10-24 18:39:40

JavaScript DOM（Document Object Model）操作是指與HTML文檔進(jìn)行交互的方法。以下是一些常用的DOM操作方法：

  1. 獲取元素：

    • getElementById(id)：通過(guò)元素的ID獲取元素。
    • getElementsByClassName(className)：通過(guò)元素的類(lèi)名獲取元素集合。
    • getElementsByTagName(tagName)：通過(guò)元素的標(biāo)簽名獲取元素集合。
    • querySelector(selector)：通過(guò)CSS選擇器獲取第一個(gè)匹配的元素。
    • querySelectorAll(selector)：通過(guò)CSS選擇器獲取所有匹配的元素集合。

  2. 修改元素內(nèi)容：

    • innerHTML：獲取或設(shè)置元素的HTML內(nèi)容。
    • innerText：獲取或設(shè)置元素的文本內(nèi)容。
    • textContent：獲取或設(shè)置元素的文本內(nèi)容（包括子元素）。

  3. 修改元素屬性：

    • getAttribute(attributeName)：獲取元素的屬性值。
    • setAttribute(attributeName, value)：設(shè)置元素的屬性值。
    • removeAttribute(attributeName)：刪除元素的屬性。

  4. 修改元素樣式：

    • style：直接通過(guò)元素對(duì)象的style屬性修改樣式（不推薦，應(yīng)使用CSS類(lèi)）。
    • classList：操作元素的類(lèi)名。

  5. 操作子元素和兄弟元素：

    • appendChild(childNode)：在元素末尾添加子節(jié)點(diǎn)。
    • insertBefore(newNode, referenceNode)：在指定節(jié)點(diǎn)之前插入新節(jié)點(diǎn)。
    • removeChild(childNode)：刪除指定子節(jié)點(diǎn)。
    • replaceChild(newChild, oldChild)：替換指定子節(jié)點(diǎn)。
    • nextSibling：獲取當(dāng)前節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)。
    • previousSibling：獲取當(dāng)前節(jié)點(diǎn)的上一個(gè)兄弟節(jié)點(diǎn)。

  6. 遍歷DOM樹(shù)：

    • parentNode：獲取當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)。
    • childNodes：獲取當(dāng)前節(jié)點(diǎn)的所有子節(jié)點(diǎn)集合（包括文本節(jié)點(diǎn)和元素節(jié)點(diǎn)）。
    • firstChild：獲取當(dāng)前節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)。
    • lastChild：獲取當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)。

  7. 創(chuàng)建和操作文檔片段：

    • DocumentFragment：創(chuàng)建一個(gè)文檔片段，用于臨時(shí)存儲(chǔ)DOM節(jié)點(diǎn)，以便一次性添加到文檔中。

  8. 事件處理：

    • 為元素添加事件監(jiān)聽(tīng)器，如addEventListener(type, listener)和attachEvent(type, listener)（針對(duì)IE瀏覽器）。

  9. 操作CSS樣式表：

    • cssText：獲取或設(shè)置元素的內(nèi)聯(lián)樣式。
    • classList.add(className)、classList.remove(className)、classList.contains(className)：操作元素的類(lèi)名。

  10. 模擬用戶交互：

    • click()、mouseover()、mouseout()等方法：模擬用戶點(diǎn)擊、鼠標(biāo)懸停等交互行為。

這些方法提供了對(duì)HTML文檔進(jìn)行動(dòng)態(tài)操作的能力，使得JavaScript在網(wǎng)頁(yè)交互和動(dòng)態(tài)內(nèi)容生成方面非常有用。在使用這些方法時(shí)，應(yīng)注意性能和瀏覽器兼容性，尤其是在處理大量DOM操作時(shí)，可能需要采用優(yōu)化策略，如使用虛擬DOM庫(kù)（如React）或批量修改DOM。

0 踩