Position in DOM array

Question

You can look up an element's DOM position via document.getElementsByTagName("a")[x], but is it possible to find that x value somewhere in its list of attributes?

If I have

<a>z</a> <!-- 0 -->
<a>2</a> <!-- 1 -->
<a>potato</a> <!-- 2 -->

These are the order of them according to the DOM. I'm trying to find if there is an attribute attached to those that contains their DOM position.

I only care if it works in Chrome. So if you have an answer that is specific to Chrome, that's fine with me. Conversely, if you have an answer specific to another browser, it doesn't help me. — Rhyono, Dec 02 '13 at 09:27
http://stackoverflow.com/questions/9496427/how-to-get-elements-by-attribute-selector-w-native-javascript-w-o-queryselector ? — l2aelba, Dec 02 '13 at 09:30
If I wanted to call on them with an id, I wouldn't bother using a custom data attribute, I'd just use an id. I don't want to assign an id, hence trying to use its native position. — Rhyono, Dec 02 '13 at 09:33
http://stackoverflow.com/a/9496574/622813 Doesn't find by ID then check attr, just change `document.getElementsByTagName('*')` to `document.getElementsByTagName('a')` — l2aelba, Dec 02 '13 at 09:35
+ in jQuery just `$('[attr]')` like.. `$('[data-custom]')`, `$('[href="http://google.com"]')` — l2aelba, Dec 02 '13 at 09:37
Let's say I have `z 2 potato`, `z` is at `0`, `2` is at `1`, and `potato` is at `2`. These are the order of them according to the DOM. I'm trying to find if there is an attribute attached to those that contains their DOM position. — Rhyono, Dec 02 '13 at 09:37
Have you tried logging the object to the console and exploring it there? Though it wouldn't make sense to me for an object to know that information about itself. Would then need to refresh this value on any dom change. Would attaching a function to the prototype of the object to get it's position as it's parents child solve your problem? — Stuart Miller, Dec 02 '13 at 09:46
@StuartMiller There's a ton of information in there and I've perused it pretty thoroughly and have yet to find it, but that doesn't mean it isn't there for certain. — Rhyono, Dec 02 '13 at 09:49
Have you seen [**this question**](http://stackoverflow.com/questions/378365/finding-dom-node-index)? — andyb, Dec 02 '13 at 09:53
@andyb I hadn't, but that may very well be the only solution. — Rhyono, Dec 02 '13 at 10:01
@Rhyono, indeed there is a lot of data in there! I don;t know for sure but it wouldn't make sense to me for an object to store information about itself like that. I don;t know a huge amount against Object Oriented Programming and how/if javascript uses principles but an object storing info like that seems a bit backwards — Stuart Miller, Dec 02 '13 at 10:01

score 0 · Answer 1 · answered Dec 02 '13 at 09:47

The x value that you're talking about depends on the dom query used to retrieve the node. Therefore, it cannot be an attribute on the node. for example, these two queries may return some of the same nodes.

<a>z</a> // 0
<a class="link" id ="number1">2</a> // 1
<a class="link" >potato</a> // 2


document.getElementsByTagName("a");
// this returns a different set of nodes
document.getElementsByClass(".link");

What you can do however

var node1 = document.getElementById('number1');

var index= document.getElementsById('a').indexOf(node1);

I was specifically trying not to use an id or any identifier. — Rhyono, Dec 02 '13 at 09:51

score 0 · Answer 2 · answered Dec 02 '13 at 09:48

From what I could understand, what you want is to find the position in an array of anchor elements based on a given node?

var nodes = document.getElementsByTagName('a'),
node = ...; // random anchor

var index = nodes.indexOf(node); // -1 = not found

This uses Array.indexOf() which is not available on all browsers; see this link for a userland implementation.

score 0 · Answer 3 · answered Dec 02 '13 at 09:54

0

perhaps you are looking for the jQuery nth-child selector it returns the node at a given number relative to it's siblings

<a>z</a> <!-- 0 -->
<a>2</a> <!-- 1 -->
<a>potato</a> <!-- 2 -->

javascript:

 console.log(
   $("a:nth-child(1)")
 );

answered Dec 02 '13 at 09:54

actual_kangaroo

5,971
2
31
45

Would the `a` tag itself know its own position? – Rhyono Dec 02 '13 at 09:56

Position in DOM array

3 Answers3