javascript - 浏览器如何识别DOM节点？

Question

如果页面上有 2 个 div:

<div/>
<div/>

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

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

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

更新:好吧，这个问题似乎有点模糊。

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

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

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

Answer 1

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

getElementsByTagName根据定义，应该返回一个遵循原始 HTML 文本序列的数组。作为 HTML 标记化和解析的一部分，浏览器的内部数据结构将记录元素在 HTML 中出现的顺序，以支持您的索引访问 [1]以便稍后工作。

对于引用，浏览器的 javascript 实现将返回 HTMLElements 的句柄。它在解析期间/之后构建(同样，这是一个实现细节)。比较这两个句柄可以得出 d1 === d2比较。原则上，您可以通过使用某种语言开发 HTML 解析器来自己实现此行为，例如 C++ ，以及一个可以与解析器的输出交互的 JavaScript 解释器(例如，包含表示 HTML 的 C++ 类的树结构，同样，这是一个实现细节)。但这是相当困难的，所以我建议只相信浏览器 vendor 已经处理了引用逻辑等。

附录

到底如何比较两个 DOM 节点是否完全相同，在幕后很可能非常类似于指针比较。确切地说，如果它是一个指针比较，那么我想它是一个实现细节，因为 javascript 本质上并不“有”指针。实际上，JavaScript 引擎本身会注意到您正在比较语句中比较两个引用(非值)参数(例如 === )，并查看两个引用是否指向相同的内存中构造(同样，实现细节)。所以，当你比较d1 === d2时其中d1和d2是您从 DOM 中提取的两个引用值，底层 javascript 引擎是:A) 注意到它们是引用，而不是值(int、char、string)，B) 然后比较以查看它们是否引用同样的事情。