前言

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

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

1. Element.checkVisibility()

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

圖片

適用場景：表單驗證可見性、廣告曝光統計、動態內容懶加載檢查

2. TreeWalker API

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

圖片

優勢：比 querySelectorAll 更節省內存，尤其適合超大型DOM樹遍歷

3. Node.compareDocumentPosition()

精確判斷兩個節點的位置關系

圖片

位掩碼常量：

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

4. scrollIntoViewIfNeeded()

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

圖片

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

5. insertAdjacentElement()

精準控制插入位置的增強版 appendChild

圖片

位置參數：

• beforebegin : 元素前插入
• afterbegin : 元素內部開頭
• beforeend : 元素內部末尾
• afterend : 元素后插入

6. Range.surroundContents()

選區操作神器：包裹文本選區

圖片

應用場景： 富文本編輯器、文本高亮批注功能。

7. Node.isEqualNode()

深度比較兩個節點是否「結構相同」

圖片

注意：只比較結構和屬性，不比較內容變化（如動態綁定的點擊事件）

8. document.createExpression()

XPath 表達式預編譯（性能優化利器）

圖片

適用場景：大數據量表格的快速篩選查詢。

小結

注意事項：

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

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