Question

对象相等于引用没有值。

var obj1 = {name: 'Yousef', age: 15},

    obj2 = {name: 'Yousef', age: 15};

console.log(obj1 === obj2); // The Result will be false

但是，此规则似乎不适用于DOM对象：

var div1 = document.querySelector('div'),

    div2 = document.querySelector('div');

console.log(div1 === div2); // The Result will be True!

任何人都可以解释原因吗？

Answer 1

您的第一个示例是比较两个单独的对象。您的DOM示例是将一个对象与自身进行比较。 querySelector没有创建对象，它会返回对DOM树中已存在的对象的引用。

与您的DOM示例相同的是：

function findElement(element, tag) {
    for (var n = 0; n < element.children.length; ++n) {
        var child = element.children[n];
        if (child.tag === tag) {
            return child;
        }
    }
    return null;
}

var tree = {
    children: [
        {
            tag: "child",
            name: "I'm the child element",
            children: []
        }
    ]
};

var obj1 = findElement(tree, "child");
var obj2 = findElement(tree, "child");
console.log(obj1 === obj2); // true

Answer 2

因为当您使用querySelector时，您会找到第一个也是唯一一个与您的查询匹配的DOM元素。

所以div1和div2是同一个对象

Answer 3

让我们尝试从docs

了解

返回文档中与指定选择器或选择器组匹配的第一个元素。

所以无论你打多少次，你都会得到相同的元素吗？

是的。 querySelector不会创建任何对象，它只是遍历DOM并返回匹配的对象。即使这一点也在文档中提到

注意：匹配是通过文档标记中的第一个元素按文档节点的深度优先预先遍历遍历完成的，并按子节点数量的顺序迭代顺序节点。

在第一种情况下，您自己创建对象。

两个对象的平等

3 个答案: