CODEWITHSUNDEEP
javascripthtmlgetelementsbytagname
Sheldon Ross
Sheldon Ross

Reputation: 5544

Javascript getElementsByTagName broken firefox?

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]
}

Upvotes: 3

Views: 2791

Answers (1)

Christian C. Salvad&#243;
Christian C. Salvad&#243;

Reputation: 827486

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:

Upvotes: 8

Related Questions