如何识别 DOM 中的每个元素以及元素的顺序？答案

【问题标题】：How can I identify every element in the DOM and the order of elements?如何识别 DOM 中的每个元素以及元素的顺序？
【发布时间】：2020-12-17 01:36:16
【问题描述】：

我希望能够引用 HTML DOM 中的任何元素，并且还知道元素出现的顺序。我希望 DOM 中的元素被索引到从 0 到这样我就可以识别特定元素，并按照它们在 HTML 中出现的顺序分别列出这些元素。

例如，在这个 HTML 中，元素的编号从 html 元素的 0 到第二个 p 元素的 9：

<html lang="en-US">
<head>
    <title>Element 2. Page title</title>
</head>
<body>
    <h1 id="mainHead">Element 4. How to uniquely identify/order DOM elements</h1>
    <div id="boxedContent">
        <p class="smallText">Element 6. I want to be able to <span class="stress">7. uniquely</span> identify each element and <i>8. also</i> determine the order in which elements appear, reading from top to bottom through the HTML.</p>
    </div>
    <p>Element 9</p>
</body>
</html>

我想要一种 JavaScript/jQuery 方式来指定，例如，title 元素、第一个 p 元素和 span。我将使用的 HTML 页面不是我的，但如果有我可以访问的整个 DOM 元素索引，我可以使用这些索引引用来访问这 3 个元素 - 即

标题：2
第一页：6
跨度：7

索引号可以让我按顺序列出元素。

这可能吗？我该怎么做？

【问题讨论】：

$('selector').index('*')??? api.jquery.com/index
这给出了相对于兄弟 $('selector') 元素的索引。我正在寻找所有元素的索引，从上到下贯穿 DOM。
不，它返回相对于传递给index()方法的选择器的索引：If a selector string is passed as an argument, .index() returns an integer indicating the position of the first element within the jQuery object relative to the elements matched by the selector. If the element is not found, .index() will return -1.

标签： javascript jquery dom

【解决方案1】：

更好的选择是使用node.compareDocumentPosition(node)（不需要jQuery）

见：https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition

给定一个节点列表，您可以这样对它们进行排序：

nodes.sort((a, b) =>
  a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
);

【讨论】：

【解决方案2】：

你可以这样做：

var elems = document.getElementsByTagName('*');

这将创建一个包含所有 DOM 元素的类数组对象。

然后，您可以通过多种方式获取该类数组对象中特定元素的索引。

你可以这样做：

var indexOfTitle = elems.indexOf(document.getElementsByTagName('TITLE'));

或者，您可以创建一个for 循环，该循环遍历elems 变量中的所有元素，并使用tagName 之类的属性来查找它，等等。

【讨论】：

谢谢乔希，这正是我想要的。如： var elems = document.getElementsByTagName('*');警报（elems[9].outerHTML）；
@AlistairChristie 我仍然不明白你为什么不想使用 jQuery index() 方法。在这里检查：jsfiddle.net/Zw5ga 编辑：哎呀，看起来你想使用它的索引来定位元素，我的坏，离题的 jsfiddle。请参阅相关的 jsFiddle：jsfiddle.net/Zw5ga/1 用作选择器：$('*:eq(9)')
太好了。使用 jQuery $('*:eq(9)') 是一种非常简洁的方式来获得我需要的东西。谢谢