Question

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

在this上检查Is there a way to check if two DOM elements are equal?回答后，我正在尝试使用===检查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

复制到fiddle。

为什么会这样？

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

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

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

2 个答案: