issamenode 判断是否为同一内存对象,即严格相等(===);isequalnode 判断节点及其后代的类型、属性、子节点结构和内容是否完全等价,忽略对象引用但要求静态 dom 结构一致。

isSameNode 和 isEqualNode 是 DOM Level 3 定义的两个节点比较方法,用途完全不同,但名字容易混淆。它们不比较“内容是否看起来一样”,而是分别回答两个本质不同的问题:是不是同一个对象?结构和内容是否完全一致?
isSameNode:判断是否为同一内存对象
这个方法检查的是两个变量是否引用**完全相同的节点实例**,即它们在内存中是同一个对象。
- 返回 true 仅当参数节点与当前节点是同一个对象(
===关系) - 哪怕两个节点一模一样(比如克隆出来的),只要不是同一个实例,就返回 false
- 现代浏览器已将其标记为废弃(deprecated),推荐直接用严格相等运算符
===替代
例如:
const div = document.getElementById('box');
const clone = div.cloneNode(true);
div.isSameNode(div); // true
div.isSameNode(clone); // false
div === div; // true
div === clone; // false
isEqualNode:判断结构与内容是否完全等价
这个方法执行深度比对,检查两个节点是否具有完全相同的类型、属性、子节点数量、子节点顺序、文本内容等——相当于“镜像复制”级别的等价。
- 只比较节点自身及其整个后代树,不关心是否为同一对象
- 对元素节点:会逐个比对 tagName、所有属性(含值)、子节点列表(递归调用 isEqualNode)
- 对文本节点:直接比对 nodeValue 字符串是否相等
- 空格、换行导致的文本节点差异会影响结果(如 innerHTML 中的空白)
例如:
const a = document.createElement('div');
a.id = 'test';
a.textContent = 'hello';
const b = document.createElement('div');
b.id = 'test';
b.textContent = 'hello';
a.isEqualNode(b); // true
const c = document.createElement('span');
c.id = 'test';
a.isEqualNode(c); // false(类型不同)
实际使用中的关键注意点
这两个方法都受 DOM 规范约束,行为稳定,但需注意边界情况:
-
isEqualNode不比较父节点、事件监听器、自定义属性或 JS 对象附加数据 - 注释节点、文档片段、DOCTYPE 节点也支持
isEqualNode,按规范定义的字段比对 - 若节点包含动态生成的内容(如
<script></script>执行结果),比对仍只看静态 DOM 结构 - 处理用户输入或模板渲染后的内容时,建议先调用
normalize()合并相邻文本节点,避免因空白拆分导致误判
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











