How to find an item reference for a DOM element?

Question

Consider a huge DOM with about 10,000 HTML elements, between them, a 1,000 span tags.

Basically no span has any identifier and all nested deep inside other objects having a very long Xpath which is not comfortable to work with.

Given all spans form an array like group, starting from 0 to 999 and we want to know what is the item reference of each unit so to select, say span 1000 we'll do:

let mySpan = document.querySelector('span')[999];

Is there a way to know what is the item reference of that specific span element (or any other element for that matter)?

I didn't find any way in the current releases of Firefox and Chrome, but maybe I missed it in the devtool or some tweak could be utilized for that.

_{This question is purely theoretical and asked for general knowledge, not a specific case. Thus, I have no specific code to share in this case.}

What do you mean by item reference? The XPath / CSS selector that would be able to get that element? — Patrick Evans, Sep 05 '17 at 15:18
Related? - https://stackoverflow.com/questions/378365/finding-dom-node-index — Paulie_D, Sep 05 '17 at 15:18
@PatrickEvans Item reference is the number of the `span` tag, between all other span tags in the DOM. For example, if the DOM has only two `span` tags, than the first `span` you'll find anywhere in a DOM search, will have the item reference of 0 and the second will have of 1. — user8551674, Sep 05 '17 at 15:34
If you need to add an refference, you can use attributes or set an Class. If you want to find it again, you can compare variables. Object refference is used. — Maxwell s.c, Sep 05 '17 at 16:13
Can you elaborate more? It's not my site so I can't add identifiers and attributes. How you use object reference in this case? — user8551674, Sep 05 '17 at 16:15
@user8551674 What do you mean by "*it's not my site*"? The post states this is a purely theoretical question and no specific case. What is your [actual problem](https://meta.stackexchange.com/q/66377)? — Bergi, Sep 06 '17 at 00:11
I meant to a case I cannot add identifiers because I don't control the site --- It's not mine so I can't just add these in sever side. No specific actual problem, indeed this is a purely theoretical question. — user8551674, Sep 06 '17 at 00:20

Will · Answer 1 · 2017-09-06T02:08:28.600

If you use querySelectorAll it will return a NodeList. NodeList has an item method.

Change

let mySpan = document.querySelector('span')[999]; to

let mySpan = document.querySelectorAll('span').item(999);

From DevTools

There might be an easier way, but one way is to inspect the element you want, select "Copy selector" from the context menu and then paste the selector. It will tell you nth-child.

Decorating Elements

It's possible to select the elements, loop through them, and add an attribute to each one with its index in the NodeList. This script may be run in the DevTools console. Inspecting an element will show a data-idx attribute as in this example:

<span data-idx="3">foo</span>

[].forEach.call(document.querySelectorAll('#js_by span span'), (span, idx) => span.dataset.idx = idx);

<div id="js_by">
  <div>
    <ul>
      <li>
        <a href="#"><span><span>foo</span></span></a>
      </li>
      <li>
        <a href="#"><span><span>foo</span></span></a>
      </li>
      <li>
        <a href="#"><span><span>foo</span></span></a>
      </li>
      <li>
        <a href="#"><span><span>foo</span></span></a>
      </li>
      <li>
        <a href="#"><span><span>foo</span></span></a>
      </li>
      <li>
        <a href="#"><span><span>foo</span></span></a>
      </li>
      <li>
        <a href="#"><span><span>foo</span></span></a>
      </li>
      <li>
        <a href="#"><span><span>foo</span></span></a>
      </li>
      <li>
        <a href="#"><span><span>foo</span></span></a>
      </li>
      <li>
        <a href="#"><span><span>foo</span></span></a>
      </li>
      <li>
        <a href="#"><span><span>foo</span></span></a>
      </li>
      <li>
        <a href="#"><span><span>foo</span></span></a>
      </li>
    </ul>
  </div>
</div>

Alternate HTML Hack

Another possibility is changing your unordered list to an ordered list and it will show you the number of the elements. Keep in mind, a NodeList has a zero-based index while an ordered list starts counting at one.

[].forEach.call(document.querySelectorAll('#js_by ul'), ul => {
  let ol = document.createElement('ol');
  let parent = ul.parentElement;
  ol.innerHTML = ul.innerHTML;
  parent.removeChild(ul);
  parent.appendChild(ol);
});

    <div id="js_by">
      <div>
        <ul>
          <li>
            <a href="#"><span><span>foo</span></span></a>
          </li>
          <li>
            <a href="#"><span><span>foo</span></span></a>
          </li>
          <li>
            <a href="#"><span><span>foo</span></span></a>
          </li>
          <li>
            <a href="#"><span><span>foo</span></span></a>
          </li>
          <li>
            <a href="#"><span><span>foo</span></span></a>
          </li>
          <li>
            <a href="#"><span><span>foo</span></span></a>
          </li>
          <li>
            <a href="#"><span><span>foo</span></span></a>
          </li>
          <li>
            <a href="#"><span><span>foo</span></span></a>
          </li>
          <li>
            <a href="#"><span><span>foo</span></span></a>
          </li>
          <li>
            <a href="#"><span><span>foo</span></span></a>
          </li>
          <li>
            <a href="#"><span><span>foo</span></span></a>
          </li>
          <li>
            <a href="#"><span><span>foo</span></span></a>
          </li>
        </ul>
      </div>
    </div>

I miss this: How do I know what is the correct reference for a given item in the NodeList? — user8551674, Sep 05 '17 at 23:30
Can you re-phrase the question? I don't understand what 'correct reference' is. If you ask for a given item in the NodeList, you will be given a reference to that item. You can log it out, change the background color, or do any number of things to make it stand out in the page. What is your goal? — Will, Sep 05 '17 at 23:45
I mean this --- Say I start the devtool inspector with `F12` + `CTRL+Shift+C`, and then inspecting some `span` tag anywhere in the webpage. How could I know this specific tag's itemreference? I mean, from the moment I did that, what's next? — user8551674, Sep 06 '17 at 00:12
I just copied a selector of a `span` somewhere in some webstie but the nth-child(n) wasn't there at all, have a look: `#js_by > div > ul > li:nth-child(4) > a > span > span`. It didn't tell me the item number of this `span` tag in relation to all other `span` tags... — user8551674, Sep 06 '17 at 00:32

How to find an item reference for a DOM element?

1 Answers1