javascript - How can I identify every element in the DOM and the order of elements?

I want to be able to refer to any element within an HTML DOM and also know what order the elements appear in. I'm hoping elements in the DOM get indexed somewhere from 0 to <number-of-elements-minus-1> so that I can identify specific elements and, separately, list those elements in the order they appear within the HTML.

For example, in this HTML, the elements would be numbered from 0 for the html element, to 9 for the second p element:

<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>

I want a JavaScript/jQuery way of specifying, for example, the title element, first p element and the span. The HTML pages I'll be working with aren't mine, but if there's a whole-DOM element index that I can access I could get to these 3 elements using those index refs - i.e.

title: 2
first p: 6
span: 7

The index numbers would allow me to list the elements in order.

Is this possible? How do I do it?

For example, in this HTML, the elements would be numbered from 0 for the html element, to 9 for the second p element:

<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>

title: 2
first p: 6
span: 7

The index numbers would allow me to list the elements in order.

Is this possible? How do I do it?

Share Improve this question asked Mar 29, 2014 at 15:11 user71463

$('selector').index('*')??? api.jquery./index – A. Wolff Commented Mar 29, 2014 at 15:24
That gives the index relative to the sibling $('selector') elements. I'm looking for an index of all elements, right through the DOM from top to bottom. – user71463 Commented Mar 29, 2014 at 15:43
No, it returns index relative to selector passed to index() method: 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. – A. Wolff Commented Mar 29, 2014 at 15:51

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

A better option would be to use node.pareDocumentPosition(node) (no jQuery needed)

see: https://developer.mozilla/en-US/docs/Web/API/Node/pareDocumentPosition

Given a list of nodes you can sort them this way:

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

You could do something like this:

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

This will create an array-like object of all DOM element.

Then, there are many ways you can get the index of a specific element in that array-like object.

You could do this:

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

Or, you can create a for loop which loops through all the elements in the elems variable, and uses a property like tagName to find it, etc.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How can I identify every element in the DOM and the order of elements? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)