Question

如果页面上有2个div：

<div/>
<div/>

然后我得到第二个元素的引用：

var node = document.getElementsByTagName("div")[1];

浏览器如何知道它是哪个节点？没有id属性，只有裸节点。我想应该有一些内部标识符，但我不知道它是否在JavaScript API中公开。

更新：好的，问题似乎有点模糊。

如果我对这2个div有2个引用怎么办：d1和d2。

“d1 === d2”如何运作？

比较需要识别。如果您有一个类的2个实例，则可以通过比较它们的标识符（引用）来判断它们是否相同。浏览器用于比较两个DOM节点的内部识别方法是什么？

Answer 1

浏览器会将HTML解析为自己的内部数据结构。它将具有getElementsByTagName的实现，它会找到div并返回一个集合，这就是您正在使用的集合。完全如何它在内部存储和解析所有信息 - 我想 - 依赖于浏览器。

根据定义，

getElementsByTagName应返回一个遵循原始HTML文本序列的数组。作为通过HTML进行标记和解析的一部分，浏览器的内部数据结构将记录HTML中出现的元素的顺序，以使您的索引访问[1]能够在以后的工作中使用。

对于引用，浏览器的javascript实现将返回它在/之后构建的HTMLElements的句柄（再次，这是一个实现细节）解析。通过比较这两个句柄，您可以进行d1 === d2比较。原则上，您可以通过使用语言开发HTML解析器来自己实现此行为，例如C++，以及可以与解析器输出交互的javascript解释器（例如，包含C++类的树结构再次表示HTML，这是一个实现细节）。虽然这很难，但我建议只是相信浏览器供应商已经处理了参考逻辑等。

Addenum

如果两个DOM节点完全相同，那么如何你可以进行比较很可能，就像指针比较一样。确切地说，如果它是一个指针比较，我想象的是一个实现细节，因为javascript本身并没有“有”指针。实际上，javascript引擎本身会注意到你正在比较一个比较语句中的两个引用（非值）参数（例如===）并查看两个引用是否都在相同的内存构造中（再次，实施细节）。因此，当您比较d1 === d2 d1和d2两个参考值时，您（例如）从DOM中提取的基础javascript引擎是：A）注意到它们是引用，而不是值（int，char，string）和B）然后进行比较，看看它们是否引用相同的东西。

Answer 2

这些变量将引用文档对象模型公开的节点。如果这些变量引用相同的节点，那么它们将是相等的，否则不是。

<div id="foo" class="bar"></div>
<div class="foobar"></div>
<div class="foobar"></div>

<script>
var div1 = document.querySelector('#foo');
var div2 = document.querySelector('.bar');
var div3 = document.querySelectorAll('.foobar')[0];
var div4 = document.querySelectorAll('.foobar')[1]

console.log(div1 === div2); //true
console.log(div1 === div3); //false
console.log(div3 === div4); //false
<script>

http://jsfiddle.net/zv0vLhuh/

浏览器如何识别DOM节点？

2 个答案:

Addenum