有没有一种方法可以检查两个DOM元素是否相等？

Question

在Javascript中，根据位置查找元素和获取元素的位置不是问题。但是是否有一种通用的比较方法呢？

我能想到的唯一方法是比较元素的id或类名，但并非所有元素都具有id或类名。

- Bob

---

如果不是相同的ID，那么在您的上下文中，“equal”是什么意思？它是相同的元素类型吗？还是相同的内容？请稍微扩展一下您的问题... - peirix

比较它们的什么？高度、背景颜色、z-index？你想要比较什么？ - Robert

你所说的“相等”是什么意思？是指两个变量指向同一个元素吗？还是指这两个元素“看起来一样”？如果是后者，那么你需要定义“看起来一样”的含义：是否包括相同的xy位置、相同的透明度/不透明度、相同的文本内容等。 - slebetman

实际上，我想比较两个用户是否点击了相同的元素。用户A点击一个元素，我会保存位置、ID、类等信息以便进行比较。然后用户B点击这个元素，我想检查他是否点击了与用户A相同的元素。 - Bob

每个元素的ID属性应该是唯一的，那为什么不比较ID呢？ - Robert

因为并非每个元素都有ID。比较ID可能是最简单的方法，但如果所选元素没有ID怎么办？我正在寻找检查ID以外的替代方法。 - Bob

Answer 1

在现代浏览器中，有两种比较节点的方法。

var a = document.createElement('div');
var b = document.createElement('div');
b.isEqualNode(a); // true

但是

b.isSameNode(a); //false

至于IE浏览器，它的DOM元素具有非标准属性uniqueID。但我想象不出在这种情况下它有用处，因为实际上您可以比较两个指针。

- shabunc

---

@Andru，哦，最近几年一切都变化得非常快 :))) - shabunc

“isSameNode”函数已经被弃用，你应该使用“isEqualNode”代替。请参见https://developer.mozilla.org/en-US/docs/Web/API/Node.isSameNode。 - idFlood

@idFlood不再是真的。 - Spyryto

是“depreciated”还是“deprecated”？我们需要弄清楚。 注：原文中的单词可能存在拼写错误，无法确定正确单词时可以同时翻译两个单词。 - vol7ron

FF似乎在相当长一段时间内停止支持这种方法。https://www.w3schools.com/jsref/met_node_issamenode.asp - BairDev

Answer 2

如果您想比较两个元素指针是否指向同一元素，请使用比较运算符。这很容易证明，因为

document.body === document.body

例如，如果我有某种方式引用了两个我不知道的元素：

if (element1 === element2) ...

- Delan Azabani

---

@vsync 看一下这个问题 https://dev59.com/Z3RC5IYBdhLWcg3wROpQ 和 https://dev59.com/0Ggv5IYBdhLWcg3wVPTU - www139

@www139 - 第一个链接没有关于DOM元素比较的信息，第二个链接没有关于比较DOM节点时==和===的信息。你能否举个例子而不是指向无关的链接？ - vsync

@vsync 我记得有人在某个地方告诉我，建议使用===而不是==。我找不到任何关于为什么在节点比较中更好的文档，但是这个网站上的许多帖子都建议这样做。===是一个严格的相等性测试，而==则是一个宽松的相等性测试。我没有更具体的信息。这个答案（https://dev59.com/mmXWa4cB1Zd3GeqPL1Ra）使用了===，但没有解释为什么这种方法更受欢迎，让我和其他人心生疑惑 :) - www139

@www139 - 我已经意识到这个区别（在做了12年的JS之后），但我认为你的第一条评论不合适，因为你“记得有人告诉你某个地方...”没有深入理解为什么它很重要以及它如何与这个答案相关似乎不够专业。你仍然没有解释为什么你认为在这种特定情况下===比==更好。 - vsync

@vsync 我认为你是正确的，抱歉打扰了阅读此讨论的人 :) - www139

Answer 3

=== 运算符仍然相关 https://developer.mozilla.org/en-US/docs/Web/API/Node/isSameNode

即使您对 DOM 进行更改，=== 运算符也可以正常工作。

const body = document.body; body.setAttribute("test","done"); const _body = document.body; body === _body // true.

:).

- FATCHOLA