Javascript神技:快速判断两个DOM节点是否相同-Node.isEqualNode()

注意,是相同,不是相等。

比如:

1
2
3
<div>This is the first element.</div>
<div>This is the second element.</div>
<div>This is the first element.</div>

其中第1个div与第3个div明显完全相同,但用==或===判断他们时,永远会得到false。

判断两个DOM节点相同的需求在哪里呢?最近React不是很热吗,他提出了“虚拟DOM”的概念,其中提到,他们会判断虚拟dom与真实dom,并只更新需要更新的部分,这是一种需求;

而平时我们自己写JS时,比如你用各种办法生成了一段html,想用他替换已存在的一个dom节点,不过如果此html与现存dom节点本来就是一样的,那不管不顾的更新dom就会造成性能浪费。

此时你可以用一个临时节点(不用添加到document里都行),将你的html赋进去,然后与现存的dom节点对比,如果有不同,再更新(或做其他你想做的)。

Node.isEqualNode()

此方法支持IE9+。拿上面的代码做示例:

1
2
3
4
5
6
let output = document.getElementById("output");
let divList  = document.getElementsByTagName("div");

output.innerHTML += "div 0 equals div 0: " + divList[0].isEqualNode(divList[0]) + "<br/>";
output.innerHTML += "div 0 equals div 1: " + divList[0].isEqualNode(divList[1]) + "<br/>";
output.innerHTML += "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) + "<br/>";

就会得到true, false, true。

如果没有这个方法,要判断两个并非同一节点,但实际完全相同的的Node,还真有些不方便。

有了这个方法,实现按需更新DOM结构就会简单一大步。

MDN: https://developer.mozilla.org/en-US/docs/Web/API/Node/isEqualNode

发表评论

电子邮件地址不会被公开。