作为前端开发者，我们每天都在操作 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操作的「瑞士军刀手册」。如果你发现其他有趣的冷门API，欢迎在评论区分享！