JavaScript 必须会的 8 个 DOM API

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

1. Element.checkVisibility()

检测元素是否真正可见（包括 CSS 遮挡、滚动隐藏、透明度为 0 等场景）：

//检测元素是否对用户可见(支持现代浏览器)
const isvisible = element.checkVisibility({
  checkOpacity: true, // 检测透明度是否为 0
  checkVisibilitycss: true, // 检测 visibility:hidden
  checkOverflow: true // 检测父容器滚动隐藏
});
console.log('元素是否可见:', isVisible);

适用场景：表单验证可见性、广告曝光统计、动态内容懒加载检查

2. TreeWalker API

高性能遍历 DOM 树的「迭代器模式」：

//遍历页面所有<h2>标签
const treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: node => node.tagName === 'H2"? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT }
)

const h2List =[];
let currentNode;
while(currentNode = treeWalker.nextNode()) {
  h2List.push(currentNode);
}

console.10g("所有 H2 标题:'，h2List);

优势：比 querySelectorAll 更节省内存，尤其适合超大型 DOM 树遍历

3. Node.compareDocumentPosition()

精确判断两个节点的位置关系：

//判断元素 A 是否在元素 B 之后
const position = nodeA.compareDocumentPosition(nodeB);
if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
  console.log('A 在 B 之后');
}

位掩码常量：

• DOCUMENT_POSITION_PRECEDING : 节点 A 在 B 之前
• DOCUMENT_POSITION_FOLLOWING : 节点 A 在 B 之后
• DOCUMENT_POSITION_CONTAINS : A 是 B 的祖先

4. scrollIntoViewIfNeeded()

智能滚动（元素不在视口时自动滚动到可视区域）：

// 平滑滚动到元素(非标准但广泛支持)
element.scrollIntoViewIfNeeded({
  behavior:'smooth',
  block: 'nearest'
});

对比传统方案：比 scrollIntoView()更智能，避免过度滚动。

5. insertAdjacentElement()

精准控制插入位置的增强版 appendChild：

<!--原始元素-->
<div id="target">Hello</div>
<script>
// 在 target 元素之后插入新元素
const newElement = document.createElement('span');
newElement.textContent = ' World!';
document.getElementById('target')
  .insertAdjacentElement('afterend', newElement);
</script>

位置参数：

• beforebegin : 元素前插入
• afterbegin : 元素内部开头
• beforeend : 元素内部末尾
• afterend : 元素后插入

6. Range.surroundContents()

选区操作神器：包裹文本选区。

// 选中文本并包裹高亮效果
const selection = window.getSelection();
const range = selection.getRangeAt(0);
const highlight = document.createElement('mark');
range.surroundcontents(highlight); // 自动处理边界拆分

应用场景： 富文本编辑器、文本高亮批注功能。

7. Node.isEqualNode()

深度比较两个节点是否「结构相同」：

// 检测两个元素是否结构完全相同
const div1 = document.createElement('div');
div1.className ='box';
const div2 = document.createElement('div');
div2.className ='box';
console.log('节点是否相同:'，div1.isEqualNode(div2)); // true

注意：只比较结构和属性，不比较内容变化（如动态绑定的点击事件）

8. document.createExpression()

XPath 表达式预编译（性能优化利器）

// 预编译 XPath 表达式(重复使用性能提升 10 倍+)
const xpathExpr = document.createExpression("//div[contains(@class, 'card' )]");
const result = xpathExpr.evaluate(
  document,
  XPathResult.ORDERED_NODE_SNAPSHOT_TYPE
);
console.log('所有卡片元素:', result.snapshotItem(0));

适用场景：大数据量表格的快速筛选查询。

结语

注意事项：

• 部分 API（如 checkVisibility）需 Chrome 106+支持
• 生产环境使用前请检查浏览器兼容性
• 冷门 API 的合理使用能让代码更优雅，但切忌过度炫技

这些 API 虽然冷门，但在特定场景下能大幅简化代码逻辑。建议收藏本文作为 DOM 操作的手册。

以上关于JavaScript 必须会的 8 个 DOM API的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。