1. Element.checkVisibility()
检测元素是否真正可见（包括CSS遮挡、滚动隐藏、透明度为0等场景）
1
2
3
4
5
6
7
|
const isVisible =element.checkVisibility({
checkOpacity:true,
checkVisibilitycss:true,
checkOverflow:true
});
console.log('元素是否可见:'isVisible);
|
适用场景：表单验证可见性、广告曝光统计、动态内容懒加载检查
2. TreeWalker API
高性能遍历DOM树的「迭代器模式」
1
2
3
4
5
6
7
8
9
10
11
|
const treeWalker =document.createTreeWalker(
document.body,
NodeFilter.SHOW ELEMENT,
{ acceptNode: node => node.tagName === 'H2’? NOdeFiIter.FILTER ACCEPT : NOdeFiIter.FILTER REJECT }
const h2List =[];
let currentNode;
while(currentNode =treeWalker.nextNode()){
h2List.push(currentNode);
}
console.log('所有H2标题:'，h2List);
|
优势：比 querySelectorAll 更节省内存，尤其适合超大型DOM树遍历
3. Node.compareDocumentPosition()
精确判断两个节点的位置关系
1
2
3
4
5
6
|
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的祖先
智能滚动（元素不在视口时自动滚动到可视区域）
1
2
3
4
5
|
element.scrollIntoViewIfNeeded(
behavior:'smooth',
block:'nearest
});
|
对比传统方案：比scrollIntoView()更智能，避免过度滚动
5. insertAdjacentElement()
精准控制插入位置的增强版 appendChild
1
2
3
4
5
6
7
8
9
10
11
| <!--原始元素 -->
<div id="target">Hello</div>
<script>
const newElement =document.createElement('span');
newElement.textContent=' World!';
document.getElementById('target').
insertAdjacentElement('afterend',newElement);
</script>
|
位置参数：
- beforebegin : 元素前插入
- afterbegin : 元素内部开头
- beforeend : 元素内部末尾
- afterend : 元素后插入
6. Range.surroundContents()
选区操作神器：包裹文本选区
1
2
3
4
5
6
|
const selection =window.getselection();
const range = selection.getRangeAt(0);
const highlight = document.createElement('mark');
range.surroundcontents(highlight);
|
应用场景： 富文本编辑器、文本高亮批注功能。
7. Node.isEqualNode()
深度比较两个节点是否「结构相同」
1
2
3
4
5
6
7
8
|
const div1 =document.createElement('div');
div1.className ='box';
const div2 = document.createElement('div');
div2.className ='box';
console.log('节点是否相同:'，div1.isEqualNode(div2));
|
注意：只比较结构和属性，不比较内容变化（如动态绑定的点击事件）
8. document.createExpression()
XPath 表达式预编译（性能优化利器）
1
2
3
4
5
6
7
8
|
const xpathExpr = document.createExpression("//div[contains(@class,'card')]");
const result=xpathExpr.evaluate(
document,
XPathReSult.ORDERED_NODE_SNAPSHOT_TYPE
);
console.log('所有卡片元素:result.snapshotItem(0));
|
适用场景：大数据量表格的快速筛选查询。
注意