Fastest way to access a node

Question

I have about thousand DIV tags structured this way:

<div id="1">
    <div class="1"></div>
    <div class="2"></div>
    ...
</div>

<div id="2">
    <div class="1"></div>
    <div class="2"></div>
    ...
</div>

If I want to now access a particular node, say 'div#10 div.5' - what is the fastest way to do it using javascript DOM traversal? I already have the index values "10" and "5" - I am just looking for the fastest way to achieve this.

Thanks a lot.

Answer 1

using jquery:

alert($("#10 > .5").html());

Answer 2

Without validation and assuming the child nodes are the only nodes and all in sequence;

document.getElementById('10').childNodes[4];

Watch out for whitespace that becomes a node https://developer.mozilla.org/En/Whitespace_in_the_DOM

Answer 3

If you've got about 1000 DIVs I assume this is auto generated html?

If so, is there any reason why you can't add an id to the inner DIVs too?

<div id="1">
    <div id="1.1" class="1"></div>
    <div id="1.2" class="2"></div>
    ...
</div>

<div id="2">
    <div id="2.1" class="1"></div>
    <div id="2.2" class="2"></div>
    ...
</div>

Then you can just use getElementById and not have to worry about ordering or spacing etc.

Since element ids have to be unique on the page then this should always be the fastest way to look up the element.