前言

大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心！

作為前端開發(fā)者，我們每天都在操作 DOM，但 DOM API 中隱藏著許多鮮為人知卻極其實(shí)用的方法。本文將介紹一些「冷門但能顯著提升開發(fā)效率」的DOM操作技巧。

1. Element.checkVisibility()

檢測(cè)元素是否真正可見（包括CSS遮擋、滾動(dòng)隱藏、透明度為0等場(chǎng)景）

圖片

適用場(chǎng)景：表單驗(yàn)證可見性、廣告曝光統(tǒng)計(jì)、動(dòng)態(tài)內(nèi)容懶加載檢查

2. TreeWalker API

高性能遍歷DOM樹的「迭代器模式」

圖片

優(yōu)勢(shì)：比 querySelectorAll 更節(jié)省內(nèi)存，尤其適合超大型DOM樹遍歷

3. Node.compareDocumentPosition()

精確判斷兩個(gè)節(jié)點(diǎn)的位置關(guān)系

圖片

位掩碼常量：

• DOCUMENT_POSITION_PRECEDING : 節(jié)點(diǎn)A在B之前
• DOCUMENT_POSITION_FOLLOWING : 節(jié)點(diǎn)A在B之后
• DOCUMENT_POSITION_CONTAINS : A是B的祖先

4. scrollIntoViewIfNeeded()

智能滾動(dòng)（元素不在視口時(shí)自動(dòng)滾動(dòng)到可視區(qū)域）

圖片

對(duì)比傳統(tǒng)方案：比scrollIntoView()更智能，避免過(guò)度滾動(dòng)

5. insertAdjacentElement()

精準(zhǔn)控制插入位置的增強(qiáng)版 appendChild

圖片

位置參數(shù)：

• beforebegin : 元素前插入
• afterbegin : 元素內(nèi)部開頭
• beforeend : 元素內(nèi)部末尾
• afterend : 元素后插入

6. Range.surroundContents()

選區(qū)操作神器：包裹文本選區(qū)

圖片

應(yīng)用場(chǎng)景： 富文本編輯器、文本高亮批注功能。

7. Node.isEqualNode()

深度比較兩個(gè)節(jié)點(diǎn)是否「結(jié)構(gòu)相同」

圖片

注意：只比較結(jié)構(gòu)和屬性，不比較內(nèi)容變化（如動(dòng)態(tài)綁定的點(diǎn)擊事件）

8. document.createExpression()

XPath 表達(dá)式預(yù)編譯（性能優(yōu)化利器）

圖片

適用場(chǎng)景：大數(shù)據(jù)量表格的快速篩選查詢。

小結(jié)

注意事項(xiàng)：

• 部分API（如checkVisibility）需Chrome 106+支持
• 生產(chǎn)環(huán)境使用前請(qǐng)檢查瀏覽器兼容性
• 冷門API的合理使用能讓代碼更優(yōu)雅，但切忌過(guò)度炫技

這些API雖然冷門，但在特定場(chǎng)景下能大幅簡(jiǎn)化代碼邏輯。建議收藏本文作為DOM操作的「瑞士軍刀手冊(cè)」。