Javascript getElementsByTagName broken firefox?

Question

I'm getting the weirdest issues with Javascript in Firefox today.

I'm trying to manipulate some table rows, but .getElementsByTagName("tr"); is pulling back junk.

dynamicTable.tableBody = dynamicTable.getElementsByTagName("tbody")[0];
var tableRows = dynamicTable.tableBody.getElementsByTagName("TR");
var actualTableRows = new Array();
for(var i in tableRows) {
    var row = tableRows[i];
    alert(row.tagName);
    if(row.tagName == "TR"){
       actualTableRows.push(row);
    }
}
dynamicTable.bodyRows = actualTableRows;

The puzzling part of course is my temporary hack to fix the error. For some reason .getElementsByTagName("tr") is pulling back some functions also.

Incidently the alert above goes something like this TR TR TR TR undefined undefined undefined.

The code I wanted was something like this

dynamicTable.bodyRows = dynamicTable.tableBody.getElementsByTagName("tr");

But then bodyrows does not contain just tr elements it has the aforementioned junk in it.

Any thoughts?

EDIT: If I just use the second block of code, I get a list 24 elements long on a table that has 21 table rows (tr elements) . The first block of code is just a hack that fixes the problem.

if I change the alert to alert(row) I get

[object HTMLTableRowElement] ...

function item() { [native code] }

21

function namedItem() { [native code] }

Answer 1

The for-in statement is enumerating also the item and namedItem methods present on the HTMLCollection that getElementsByTagName returns.

To iterate over array-like elements like DOM Collections, a simple sequential loop is always recommend, the for...in statement is meant to be used to enumerate object properties.

dynamicTable.tableBody = dynamicTable.getElementsByTagName("tbody")[0];
var tableRows = dynamicTable.tableBody.getElementsByTagName("TR");
var actualTableRows = new Array();
for(var i = 0, n = tableRows.length; i < n; i++) { // <---- simple for loop
    var row = tableRows[i];
    alert(row.tagName);
    if(row.tagName == "TR"){
       actualTableRows.push(row);
    }
}
dynamicTable.bodyRows = actualTableRows;

You shouldn't use for..in with array-like objects because:

• The order of iteration is not guaranteed, the array indexes may not visited in the numeric order.
• Inherited properties are also enumerated (This can be another source of problems).

Recommended article:

• Enumeration VS Iteration