前言

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

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

1. Element.checkVisibility()

檢測元素是否真正可見（包括CSS遮擋、滾動隱藏、透明度為0等場景）

圖片

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

2. TreeWalker API

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

圖片

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

3. Node.compareDocumentPosition()

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

圖片

位掩碼常量：

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

4. scrollIntoViewIfNeeded()

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

圖片

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

5. insertAdjacentElement()

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

圖片

位置參數(shù)：

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

6. Range.surroundContents()

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

圖片

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

7. Node.isEqualNode()

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

圖片

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

8. document.createExpression()

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

圖片

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

小結(jié)

注意事項：

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

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