JavaScript DOM(Document Object Model)操作是指與HTML文檔進(jìn)行交互的方法。以下是一些常用的DOM操作方法:
獲取元素:
getElementById(id)
:通過(guò)元素的ID獲取元素。getElementsByClassName(className)
:通過(guò)元素的類(lèi)名獲取元素集合。getElementsByTagName(tagName)
:通過(guò)元素的標(biāo)簽名獲取元素集合。querySelector(selector)
:通過(guò)CSS選擇器獲取第一個(gè)匹配的元素。querySelectorAll(selector)
:通過(guò)CSS選擇器獲取所有匹配的元素集合。修改元素內(nèi)容:
innerHTML
:獲取或設(shè)置元素的HTML內(nèi)容。innerText
:獲取或設(shè)置元素的文本內(nèi)容。textContent
:獲取或設(shè)置元素的文本內(nèi)容(包括子元素)。修改元素屬性:
getAttribute(attributeName)
:獲取元素的屬性值。setAttribute(attributeName, value)
:設(shè)置元素的屬性值。removeAttribute(attributeName)
:刪除元素的屬性。修改元素樣式:
style
:直接通過(guò)元素對(duì)象的style屬性修改樣式(不推薦,應(yīng)使用CSS類(lèi))。classList
:操作元素的類(lèi)名。操作子元素和兄弟元素:
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)。遍歷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)。創(chuàng)建和操作文檔片段:
DocumentFragment
:創(chuàng)建一個(gè)文檔片段,用于臨時(shí)存儲(chǔ)DOM節(jié)點(diǎn),以便一次性添加到文檔中。事件處理:
addEventListener(type, listener)
和attachEvent(type, listener)
(針對(duì)IE瀏覽器)。操作CSS樣式表:
cssText
:獲取或設(shè)置元素的內(nèi)聯(lián)樣式。classList.add(className)
、classList.remove(className)
、classList.contains(className)
:操作元素的類(lèi)名。模擬用戶交互:
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。