Question

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

 def Triangular():
        n=0
        result=[]
        while n<101:
            n=1+n
            triangleNumbers = (n*(n+1))//2
            result.append(triangleNumbers)
            print result
    Triangular()

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

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

Answer 1

浏览器主要通过它们在DOM树中的独特位置来区分它们。文档中的每个标记一旦被解析，就会在浏览器内存中的文档内部表示中获得其独特的位置 - DOM（文档对象模型），这是一种树状结构。浏览器通过它在树中的位置来识别这个标记（它通常对我们隐藏的具体方式是什么？我们拥有的是DOM树）。没有与每个标记关联的显式ID，但是，您可以简单地通过它们在树中的位置来解决页面上的每个元素（无论它们是否具有ID） - 即它们的父标记和给定标记的位置它的兄弟姐妹 - 使用CSS（通过像body p em和::nth-child()等构造）和JavaScript（通过DOM遍历）。

当您将事件处理程序附加到任何给定元素，并且该事件触发时（例如，您有两个按钮，仅将单击处理程序附加到第二个按钮，并且用户单击该第二个按钮），您的事件handleк函数接收一个事件数据（来自浏览器的一条说明，描述究竟发生了什么），在这些数据中你通常会找到对发生此事件的DOM元素的引用（即在我们的示例中，对表示第二个按钮的DOM元素的引用） - 您仍然可以从该引用遍历DOM树，例如，了解其父母，兄弟姐妹等）。

Answer 2

css中总有nth-child属性。

.item:nth-child(2) {

background-color: red;
}

.item:nth-child(1) {
 color:white;
}

fiddle

浏览器如何在两个相同的HTML元素之间进行区分？

2 个答案: