javascript - 浏览器如何区分两个相同的 HTML 元素？

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 7 年前。

Improve this question

在 HTML 页面中，有两个完全相同的元素；

<div class="item"></div>
<div class="item"></div>

浏览器内部如何区分这两个元素？以下是浏览器能够执行此操作的一个工作示例:https://jsfiddle.net/t9rvyhoc/

我假设它是某种唯一的 ID。如果是，我可以访问该属性吗？

Answer 1

浏览器主要通过它们在 DOM 树中的独特位置来区分它们。文档中的每个标签一旦被解析，就会在浏览器内存中文档的内部表示中获得其唯一的位置 - DOM(文档对象模型)，它是一种树状结构。浏览器通过它在树中的位置来识别这个标签(它到底是如何做到这一点的，这通常对我们来说是隐藏的？我们拥有的是 DOM 树)。没有与每个标签关联的显式 ID，但是，您可以简单地通过它们在树中的位置(即它们的父标签和给定标签之间的位置)来寻址页面上的每个元素(无论它们是否有 ID)。它的 sibling - 都使用 CSS(通过 body p em 和 ::nth-child() 等构造)和 JavaScript(通过 DOM 遍历)。

当您将事件处理程序附加到任何给定元素并且该事件触发时(例如，您有两个按钮，仅将单击处理程序附加到第二个按钮，并且用户单击第二个按钮)，您的事件处理函数接收事件数据(来自浏览器的注释，描述到底发生了什么)，并且在该数据中的某个位置，您通常会找到对发生此事件的 DOM 元素的引用(即，在我们的示例中，对表示第二个按钮的 DOM 元素的引用) - 你仍然可以从该引用遍历 DOM 树，例如了解它的 parent 、 sibling 等)。