Javascript firstChild problem in Firefox 1

keesvanbreukelen · Jun 21, 2007

I have great difficulty with firstChild method and the childNodes collection in Firefox, the following sample code works well in IE but not at all in Firefox, when I check the Javascript bible it looks like it is perfectly standard DOM handling.

Sample:

<html>
<head>
</head>
<body>
<center>
Why does this work in IE but not in Firefox?
<br /><br />
<table id = "table">
<tr id = "row1">
<td id = "col1">Hello There</td>
</tr>
</table>
<br /><br />
<input type = "button" value = "show table innerHTML" onclick = "document.getElementById('tablehtml').value=document.getElementById('table').innerHTML;" />
<br /><br />
<input type = "button" value = "alert(document.getElementById('table').firstChild.firstChild.id should display: row1)" onclick = "alert(document.getElementById('table').firstChild.firstChild.id)" />
<br />
<br />
<br />
<input type = "button" value = "alert(document.getElementById('row1').firstChild.id should display: col1)" onclick = "alert(document.getElementById('row1').firstChild.id)" />
<br /><br />
<textarea id = "tablehtml" rows = "4" cols = "60"> </textarea>

</center>
</body>
</html>

feherke · Jun 21, 2007

Hi

If you would execute

Code:

alert(document.getElementById('row1').firstChild)

FireFox would display "object Text", because there is an end of line right after the [tt]tr[/tt], which is a TextNode.

Code:

[highlight pink]<tr id = "row1">[/highlight][highlight lime] 
[/highlight][highlight cyan]<td id = "col1">Hello There</td>[/highlight]

[highlight pink]document.getElementById('row1')[/highlight]
[highlight lime]document.getElementById('row1').firstChild[/highlight]
[highlight cyan]document.getElementById('row1').firstChild.nextSibling[/highlight]

So to have it working as you expect, either use :

Code:

document.getElementById('row1').firstChild[red].nextSibling[/red]

or simply remove the text between those two tags :

Code:

<tr id = "row1"><td id = "col1">Hello There</td>

[gray]<!-- or -->[/gray]

<tr id = "row1"
><td id = "col1">Hello There</td>

By the way, [tt]firstChild[/tt] is not a method, it is a property.

Feherke.

http://rootshell.be/~feherke/

BillyRayPreachersSon · Jun 21, 2007

Or better still, try using the "rows" and "cells" collections and don't worry about whitespace issues.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

BillyRayPreachersSon · Jun 21, 2007

See here:

http://msdn2.microsoft.com/en-us/library/ms537484.aspx

and here:

http://msdn2.microsoft.com/en-us/library/ms537443.aspx

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

keesvanbreukelen · Jun 22, 2007

Thank you both for these solutions, particularly for helping me understand why it goes wrong! I have used the first solution as it fitted into my actual code (not the sample above) with minimal change.

Kees

BillyRayPreachersSon · Jun 22, 2007

If you used the "nextSibling" part of the post, I'd advise against it in case one of your users has a browser that ignores the whitespace. If you've used the tag open/close trick, you should be fine, although I still think using the proper collections is a much neater solution.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

feherke · Jun 22, 2007

Hi

I agree. When I found the [tt]rows[/tt] and [tt]cells[/tt] I rewrote some of my scripts, although they was not based on hardly predictable things like [tt]nextSibling[/tt] combinations. [tt]rows[/tt] and [tt]cells[/tt] also makes the code more readable & maintainable.

Feherke.

http://rootshell.be/~feherke/

Einstein47 · Jun 22, 2007

I tried the rows and cells example on firefox without luck. I know that document.all is an IE specific reference - I changed that to document.getElementById('oTable') and that still works on IE6, but FireFox still chokes on:

Code:

document.getElementById('oTable').rows(i).cells.length

Here is the full example:

Code:

<HTML>
<SCRIPT LANGUAGE="JavaScript">
function numberCells() {
    var count=0;
    var numrows = document.getElementById('oTable').rows.length;
    for (i=0; i < numrows; i++) {
        for (j=0; j < [red]document.getElementById('oTable').rows(i).cells.length[/red]; j++) {
            document.getElementById('oTable').rows(i).cells(j).innerText = count;
            count++;
        }
    }
    alert("Done");
}
</SCRIPT>
<BODY onload="numberCells()">
<TABLE id="oTable" border="1" width="200">
<TR><TH>&nbsp;</TH><TH>&nbsp;</TH><TH>&nbsp;</TH><TH>&nbsp;</TH></TR>
<TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD></TR>
<TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD></TR>
</TABLE>
</BODY>
</HTML>

Can anyone else confirm this?

Einstein47
For best results: hand wash in cold, tumble dry low.
For not so good results: drag through puddles, pound on rocks, air dry on tree branch.
[[]Starbase47.com]

tsuji · Jun 22, 2007

>rows(i).cells(j)
[tt]rows.cells[j][/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Javascript firstChild problem in Firefox 1

keesvanbreukelen

Programmer

feherke

Programmer

BillyRayPreachersSon

Programmer

BillyRayPreachersSon

Programmer

keesvanbreukelen

Programmer

BillyRayPreachersSon

Programmer

feherke

Programmer

Einstein47

Programmer

tsuji

Technical User

Similar threads

Part and Inventory Search

Sponsor