MENU
- 前言
- 1、Element.checkVisibility()
- 2、TreeWalker
- 3、Node.compareDocumentPosition()
- 4、scrollIntoViewIfNeeded()
- 5、insertAdjacentElement()
- 6、Range.surroundContents()
- 7、Node.isEqualNode()
- 8、document.createExpression()
- 小结
前言
作为前端开发者，我们每天都在操作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，欢迎在评论区分享！
