来了!JavaScript 最强大的 8 个 DOM API
作为前端开发者，我们每天都在操作 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，欢迎在评论区分享！
