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

在Fiddle中进行复制。

为什么会这样呢？

- agconti

Answer 1

isEqualNode在DOM Level 3中被定义如下：

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

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

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

- Mike Samuel

Answer 2

你创建了一个新的元素，这不是已经存在的元素。但由于它们具有相同的结构和内容，因此它们是相等的。就像如果两个字符串对象包含相同的文本，则它们相等，但如果你分别创建它们，则它们不相等。

以下是一个更简单的情况：

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

- fejese

---

明白了，那很有道理。 - agconti