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

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

javascript jquery dom

Javascript 如何识别DOM中的每个元素以及元素的顺序？,javascript,jquery,dom,Javascript,Jquery,Dom,我希望能够引用HTMLDOM中的任何元素，并知道元素的显示顺序。我希望DOM中的元素能够在0到之间建立索引，这样我就可以识别特定的元素，并按照它们在HTML中出现的顺序分别列出这些元素例如，在此HTML中，元素的编号从HTML元素的0到第二个p元素的9： <html lang="en-US"> <head> <title>Element 2. Page title</title> </head> <body>

我希望能够引用HTMLDOM中的任何元素，并知道元素的显示顺序。我希望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 第一个p:6 跨度：7 索引编号允许我按顺序列出元素

这可能吗？我该怎么做？

您可以这样做：

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

这将为所有DOM元素创建一个类似数组的对象

然后，有很多方法可以获得类似于数组的对象中特定元素的索引

您可以这样做：

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

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

您可以执行以下操作：

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

这将为所有DOM元素创建一个类似数组的对象

然后，有很多方法可以获得类似于数组的对象中特定元素的索引

您可以这样做：

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

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

更好的选择是使用node.compareDocumentPositionnode无需jQuery

见：

给定节点列表，可以按以下方式对其进行排序：

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

更好的选择是使用node.compareDocumentPositionnode无需jQuery

见：

给定节点列表，可以按以下方式对其进行排序：

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

$“选择器”。索引“*”？？？这将给出相对于同级$'selector'元素的索引。我正在寻找所有元素的索引，从上到下贯穿DOM。不，它返回相对于传递给索引方法的选择器的索引：如果选择器字符串作为参数传递，.index返回一个整数，指示jQuery对象中第一个元素相对于选择器匹配的元素的位置。如果找不到元素，.index将返回-1。$'selector'。index'*'？？？这将给出相对于同级$'selector'元素的索引。我正在寻找所有元素的索引，从上到下贯穿DOM。不，它返回相对于传递给索引方法的选择器的索引：如果选择器字符串作为参数传递，.index返回一个整数，指示jQuery对象中第一个元素相对于选择器匹配的元素的位置。如果找不到元素，.index将返回-1。谢谢Josh，这正是我要找的。如：var elems=document.getElementsByTagName'*'；alertelems[9]。outerHTML@AlistairChristie我仍然不明白为什么您不想使用jQuery索引方法。检查这里：EDIT:oops，看起来您想使用它的索引MyBad，脱离主题的JSFIDLE作为元素的目标。请参阅相关的jsFiddle:usingas选择器：$'*：eq9'这太好了。使用jQuery$“*：eq9”是一种非常简洁的方式，可以获得我需要的东西。谢谢Hanks Josh这正是我想要的。如：var elems=document.getElementsByTagName'*'；alertelems[9]。outerHTML@AlistairChristie我仍然不明白为什么您不想使用jQuery索引方法。检查这里：EDIT:oops，看起来您想使用它的索引MyBad，脱离主题的JSFIDLE作为元素的目标。请参阅相关的jsFiddle:usingas选择器：$'*：eq9'这太好了。使用jQuery$“*：eq9”是一种非常简洁的方式，可以获得我需要的东西。谢谢