Element.getElementsByTagName weirdness

[logiczero]

Here's my code:
===
var content = document.getElementById('content');
var collection = content.getElementsByTagName('div');

for (var i = 0; i < collection.length; i++) {
alert(collection[collection.length - i - 1].id);
}
//Replace the above loop with this one, then run again
for (var i = 0; i < collection.length; i++) {
alert(collection[i].id);
}
===
The first for-loop displays the id of every div in the collection. The
second for-loop displays the id of each div as being 'undefined'.

Ultimately, I want to change a style of the div that matches a certain
ID, but the objects in 'collection' don't seem to have any attributes
except 'id'.

Why does the loop work backwards but not forwards? And why aren't the
objects in the collection typical elements? I've tested this code in
both Firefox and IE6. Both exhibit the same behavior.

[rob.nikander]

logiczero wrote:
<snip>

Why does the loop work backwards but not forwards? And why aren't the
objects in the collection typical elements? I've tested this code in
both Firefox and IE6. Both exhibit the same behavior.

I just pasted your code into a test file, along with a couple divs, as
shown below. It works fine for me in Firefox and IE6. Must be
something else strange going on.

Rob
<div id='content'>
<div id='div-1'></div>
<div id='div-2'></div>
<div id='div-3'></div>
</div>

<script>

var content = document.getElementById('content');
var collection = content.getElementsByTagName('div');

for (var i = 0; i < collection.length; i++) {
alert(collection[collection.length - i - 1].id);
}

//Replace the above loop with this one, then run again
for (var i = 0; i < collection.length; i++) {
alert(collection[i].id);
}

</script>

[logiczero]

Well, I think I've come up with my own answer...hope it helps someone
else.

getElementsByTagName returns a NodeList. If you want to get an item
(a.k.a element) out of that list, you have to use the NodeList.item( )
method. So in my case
===
for (var i = 0; i < collection.length; i++) {
var elem = collection.item(i);
alert(elem.getAttribute("id"));
}
===
Now elem behaves just like you would expect an element to behave.

I guess using square brackets on a NodeList (collection[i]) is
incorrect.

[Richard Cornford]

logiczero wrote:

Well, I think I've come up with my own answer...hope it
helps someone else.

getElementsByTagName returns a NodeList. If you want to get
an item (a.k.a element) out of that list, you have to use
the NodeList.item( ) method. So in my case
===
for (var i = 0; i < collection.length; i++) {
var elem = collection.item(i);
alert(elem.getAttribute("id"));
}
===
Now elem behaves just like you would expect an element
to behave.

I guess using square brackets on a NodeList (collection[i])
is incorrect.

The ECMAScript bindings specifically require DOM implementations to map
square bracket access to the - item - method of NodeList objects, and to
date nobody has suggested any actual issues with bracket notation
operating on NodeLists. If there really was an issue it would have been
seen before, and the use of - getElementsByTagName - is so common that
it would be well known by now.

If you want an explanation of the phenomenon you observed you have to
provide a full test case that demonstrates it. That means (minimal) HTML
and script.

Richard.

[logiczero]

Thanks to Richard and Rob for looking at this.

I'm embarrassed to say that in the course of trying to give a more
complete example of broken code, I figured out the problem was actually
due to PHP mangling the JavaScript...so ultimately a useful, if
humbling, exercise.

Thanks again for looking, and insisting that JavaScript works like it
should.