Is DOM order always consistent? (Javascript)

Question

I want to use appendChild() to create the following for access in a grid format:

<div class="x"> <div class="y">0-0</div> <div class="y">0-1</div> <div class="y">0-2</div> </div> <div class="x"> <div class="y">1-0</div> <div class="y">1-1</div> <div class="y">1-2</div> </div> <div class="x"> <div class="y">2-0</div> <div class="y">2-1</div> <div class="y">2-2</div> </div>

Then, I would access the div containing "2-1" using something like this:

var x2y1 = document.getElementsByClassName('x')[2].getElementsByClassName('y')[1];

Any problems here that you guys know of, back to IE6?

You can rely on DOM ordering governing the order of nodes in NodeLists going a long way back, IE6 at least. However ancient versions of Mozilla (not Firefox) didn't like using array indexing with NodeLists, but anybody running that browser has a lot more to worry about :) — Pointy
– Pointy, Commented Mar 16, 2014 at 0:07
@Pointy Haha yeah, I know, I just used that for brevity. Although on small projects like this I do sometimes just extend it for convenience. ;) — J S
– J S, Commented Mar 16, 2014 at 0:12

Adam D. Ruppe · Accepted Answer · 2014-03-16 00:10:12Z

getElementsByClassName is a fairly new function, I think introduced in IE9. (Personally, I've never used it since querySelector can do it too - and so much more - and was introduced in IE8!)

Anyway, the order is defined for all these functions. http://www.w3.org/TR/dom/#concept-getelementsbyclassname notice that it says it searches through an ordered set.

Note too that getElementsByClassName returns a live list; changes to the DOM are immediately seen in the results (this is probably the key difference between it and querySelector(".classname") - the latter returns a fixed array). So if you modify the elements, be careful about your loop conditions and indexing. It is very easy to forget and then only see some nodes because the indexes changed from under your feet!

Thanks for the confirmation on order with the link, I appreciate it!
As for the other tips, I genuinely appreciate it, but I'm well aware of all that! I use a custom getElementsByClass() function, and for convenience in tiny projects I just extend getElementsByClassName() with it if it's a browser where it doesn't already exist. Also, I don't mind working with live lists on this particular application, I'm used to it.
Yeah, I like to post a little extra background info just in case though, and it might help people who stumble across this in a web search too. Besides, if you say too much, the reader can just skip it, say too little and it is time for a second question so I try to err on the side of saying too much :)

Vikram · Accepted Answer · 2014-03-16 00:08:08Z

Instead you can give an id attribute to the divs and it will always be consistent with:

<div class="x"> <div class="y" id="0-0">0-0</div> <div class="y" id="0-1">0-1</div> <div class="y" id="0-2">0-2</div> </div> var x0y2 = document.getElementById('0-2');

You wouldn't have to rely on DOM order..

Thanks for the answer! The reason I opted out of that approach (if possible) was to preserve greater flexibility with manipulating those cells later if need be.

Collectives™ on Stack Overflow

Is DOM order always consistent? (Javascript)

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related