What is the DOM difference between IE and FF in this code?

[Cylix]

<div id="alertBox" style="position: absolute; border:1px dashed;
z-index:2">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>THE TITLE </td>
</tr>
<tr>
<td>CONTENT</td>
</tr>
</table>
</div>

When I get the object:
myObject = document.getElementById('alertBox');
alert(myObject.childNodes.length)

I found that there are 3 nodes in FF and only 1 node in IE6,
FF got: Text Node, Table Node, Text Node,
IE got: Table Node

Is it the property of the browser?

 

[RobG]

<div id="alertBox" style="position: absolute; border:1px dashed;
z-index:2">
<table width="400" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>THE TITLE </td>
</tr>
<tr>
<td>CONTENT</td>
</tr>
</table>
</div>

When I get the object:
myObject = document.getElementById('alertBox');
alert(myObject.childNodes.length)

I found that there are 3 nodes in FF and only 1 node in IE6,
FF got: Text Node, Table Node, Text Node,
IE got: Table Node

Is it the property of the browser?

Yes. The Gecko rendering engine (used in Firefox, Mozilla, et al)
maintains whitespace in the source HTML by inserting textnodes.

There is quite a bit of debate over this behaviour, however it is not
likely to change.

<ORL: https://bugzilla.mozilla.org/show_bug.cgi?id=26179 >


When navigating down the DOM tree, you always need to check the node
type to see if it's what you expect or a text node. If you remove the
whitespace between the closing tag of one element and the opening tag of
the next, Firefox will not insert the extra text nodes, e.g.:

<div id="alertBox" ... ><table ... ><tbody>


But depending on that is likely to create a maintenance hazard.