Web前端之JavaScript的DOM操作冷门API

---

前言

作为前端开发者，我们每天都在操作DOM，但DOM的API中隐藏着许多鲜为人知却极其实用的方法。本文将介绍一些冷门但能显著提升开发效率的DOM操作技巧。

---

1、Element.checkVisibility()

检测元素是否真正可见，包括CSS遮挡、滚动隐藏、透明度为0等场景。
适用场景：表单验证可见性、广告曝光统计、动态内容懒加载检查。

---

2、TreeWalker

高性能遍历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需Chrome106+支持。
生产环境使用前请检查浏览器兼容性。
冷门API的合理使用能让代码更优雅，但切忌过度炫技。

---

这些API虽然冷门，但在特定场景下能大幅简化代码逻辑。建议收藏本文作为DOM操作的「瑞士军刀手册」。如果你发现其他有趣的冷门API，欢迎在评论区分享！