Hello. I'm experiencing an odd problem when trying to navigate through a table's rows and cells in a while loop using javascript. I'm using Firefox 3.5.7 on Win7 with Firebug enabled.

I have this markup:

<table>
    <tbody>
        <tr id='firstRow'><td>a</td><td>b</td><td>c</td></tr>
        <tr><td>a</td><td>b</td><td>c</td></tr>
        <tr><td>a</td><td>b</td><td>c</td></tr>
    </tbody>
</table>

And this javascript:

var row = document.getElementById('firstRow');
console.log(row); // Row call 1
while (row) {
    console.log(row); // Row call 2
    row = row.nextSibling;
}

The problem I'm having is that on the line commented "Row call 1", Firebug is outputting

<tr id='firstRow'>

as expected. However, in the while loop, Firebug is giving me

<tr id='firstRow'>
<TextNode textContent="\n">

It is giving me different output for the exact same row, even immediately after the while loop begins executing and nothing else touched the row. For subsequent rows, it of course does not have id='firstRow' as an attribute.

The bigger problem this is giving me is that if I'm in the while loop, and I want to access a particular cell of the current row using row.cells[0], Firebug will give me an error that row.cells is undefined.

I want to know if someone could shed some light on this situation I am experiencing.