This just cost me and a colleague about an hour.
var headers = mydiv.getElementsByTagName('h3'); for (var i = 0; i < headers.length; i++) { // ... }
When run, this wasn’t going inside the for loop at all (in IE; firefox worked). So we stuck in an alert to see what headers.length came out as. [object]
apparently.
After much chasing around the houses, we looked closer at the original HTML:
<h3 id='length'>Some Header</h3>
It’s a miracle that this worked at all in firefox. What was happening is that the length property of the headers collection was being shadowed by the element with an id of length. That’s happening because the collection is an HTMLCollection, and the JavaScript DOM bindings specify that you can also index by id into that collection. And because functions and properties share the same namespace in JavaScript, disaster ensues.
So the lesson to take away from all this is that you should take great care to avoid using id’s that are the same as existing method or property names. Eric Meyer found the same things some time ago: Reserved ID Values.