检查JavaScript中两个元素是否相等

Question

为什么elementA === elementB产生的结果与elementB.isEqualNode（elementA）不同？

检查此答案后是否有办法检查两个DOM元素是否相等？ 我正在尝试使用===检查javascript中的两个元素是否相等。 令人惊讶的是，当元素A和B相同时A === B返回false而B.isEqualNode(A)返回true 。

这是一个例子：

HTML：

<div>   
   <h1>Test</h1>
</div>

JavaScript的：

var inMemoryDiv = document.createElement('div');
var inMemoryH1 = document.createElement('h1');
inMemoryH1.innerHTML = "Test";
inMemoryDiv.appendChild(inMemoryH1);

var h1 = document.getElementsByTagName('h1')[0];
alert(h1 === inMemoryH1); // false
alert(inMemoryH1.isEqualNode(h1)); // true
alert(h1.innerHTML === inMemoryH1.innerHTML); // true

复制在一个小提琴 。

为什么会这样？

Answer 1

isEqualNode在DOM Level 3中定义，因此：

此方法测试节点的相等性， 而不是相同性 （即，两个节点是否是对同一对象的引用），可以使用Node.isSameNode()进行测试。 所有相同的节点也是相同的，但反过来可能不正确。

当且仅当满足以下条件时，两个节点相等：

• 这两个节点属于同一类型。
• 以下字符串属性相同：nodeName，localName，namespaceURI，prefix，nodeValue。 这是：它们都是null，或者它们具有相同的长度并且是字符相同的字符。
• NamedNodeMaps属性相等。 这是：它们都是空的，或者它们具有相同的长度，并且对于存在于一个映射中的每个节点，存在另一个映射中存在且相等的节点，但不一定在同一索引处。
• childNodes NodeLists是相同的。 这是：它们都是null，或者它们具有相同的长度并且在相同的索引处包含相等的节点。 注意，规范化会影响平等; 为避免这种情况，应在比较之前对节点进行规范化。

Answer 2

您创建一个新元素。 这与现有的不同。 它们是平等的，因为它们具有相同的结构和内容。 如果它们包含相同的文本，则两个字符串对象相同，但如果单独创建它们则不相同。

这是一个更简单的案例：

var div1 = document.createElement('div');
var div2 = document.createElement('div');
alert(div1 === div2); // false
alert(div1.isEqualNode(div2)); // true