Dr.NETjes

Dion Olsthoorn on ASP.NET

FireFox doesn't understand a DOM node-tree?

Have a look at this HTML snippet. When clicking the 'clickme' innerText of div2, I expect the browser to alert "div2", because div2 is the first child of its parent, div1.

<div id="div1">
  <div id="div2" onclick="alert(this.parentNode.childNodes[0].id)">clickme</div>
</div>

I've tested this HTML snippet on both IE and FireFox, and guess what?
IE reacts as expected by alerting "div2".
However, FireFox alerts "undefined"....?

Apparently, in FireFox div2 is considered to be the second childNode of div1; not the first. I guess this is because FireFox parses the whitespace between div1 and div2 as being a seperate node! BUT WHY????

Did the creators of FireFox (Mozilla Foundation) implemented this by design? Is it ever going to be fixed in FireFox? Or do we just have to live with it, and write seperate javascript for IE and FireFox?

[Note: of course I can let IE and FF return the same results by removing all whitespace between the div1 and div2 tags, but that would result in human-unreadable and hard to maintain Html.]

Postscript:
I've received a lot of comments about the fact that FireFox precisely (I'd say 'rigidly') follows the w3c DOM recommendation on this. I'm aware of the w3c specs, but I still think it sucks having to write seperate code for IE and FF (or include a library of wrapper functions).
Personally, I think the IE dom-representation is the more sensible one, whether it's in the recommendation or not.
And FireFox just made a very bad 'first impression' to me :(

Read these links on more information why Mozilla has chosen to preserve whitespaces in the DOM:

Posted: Jun 23 2005, 10:47 PM by Dr.NETjes | with 8 comment(s)

Comments

Gabe Halsmer said:


Hmmm, I thought IE also considered the whitespace to be a text-node. Must only be in certain situations.

I almost never use the childNodes indexer directly. It breaks too easily if the HTML changes a little. Instead I use helper functions like, GetFirstChildElement() to iterate through childNodes and return the first nodeType==ELEMENT_NODE it runs into. So it someone modifies the HTML like this...

<div id="div1"> <!-- my comment -->
<div id="div2" ...

Then it will still work since it will ignore the comment-node, and the 2 text-nodes by it.


# June 23, 2005 4:59 PM

Anonymous said:

Firefox is following the standard, while IE isn't.
# June 23, 2005 5:33 PM

. said:

If you knew anything about the way this works, you'd know that Firefox is right; the whitespace is a valid node. Just because IE works the way you want doesn't make it corrent.
# June 23, 2005 6:36 PM

Wyatt Barnett said:

I cannot think of the amount of whitespace I have removed from otherwise human-readable HTML documents because of IE's whitespace rendering bugs. And you want to complain about having to remove a little for firefox.
# June 23, 2005 8:04 PM

Ron Krauter said:

There is nothing wrong with the way firefox handles the DOM. Why don't you post what you are trying to do - someone will be able to help you.

-Ron Krauter
# June 23, 2005 11:09 PM

Ruben Badaró said:

If you check the DOM Specification at W3C (http://www.w3.org/TR/DOM-Level-2-Core/core.html) you'll understand that a Node can have a few different types.

const unsigned short ELEMENT_NODE = 1;
const unsigned short ATTRIBUTE_NODE = 2;
const unsigned short TEXT_NODE = 3;
const unsigned short CDATA_SECTION_NODE = 4;
const unsigned short ENTITY_REFERENCE_NODE = 5;
const unsigned short ENTITY_NODE = 6;
const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
const unsigned short COMMENT_NODE = 8;
const unsigned short DOCUMENT_NODE = 9;
const unsigned short DOCUMENT_TYPE_NODE = 10;
const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short NOTATION_NODE = 12;
# June 24, 2005 7:45 AM

dion (dr.netjes) said:

I've received a lot of comments about the fact that FireFox precisely (I'd say 'rigidly') follows the w3c DOM recommendation on this.

I'm aware of the w3c specs, but I still think it sucks having to write seperate code for IE and FF (or include a library of wrapper functions).

Personally, I think the IE dom-representation is the more sensible one, whether it's in the recommendation or not.
And FireFox just made a very bad 'first impression' to me :(

Read these links on more information why Mozilla has chosen to preserve whitespaces in the DOM:
- https://bugzilla.mozilla.org/show_bug.cgi?id=26179 (the 'whitespace' bug with a lengthy discussion)
- http://www.mozilla.org/docs/dom/technote/whitespace/ (Mozilla explaining the issue and giving a poor solution)
# June 24, 2005 3:16 PM

Marc "Obiwan" Jacobi [Macaw] said:

This is a nice example of the difference between Html and Xml. In Html you're almost never interested in the whitespace used to format the Html. It's not functional for the page the Html describes. In the strict world of Xml this is not possible. Everything is a node. So how would you solve this in XHtml where the world of Html and Xml merge...?

I do think you could try to write code that is more robust though... ;-)
# June 27, 2005 5:22 AM
Leave a Comment

(required) 

(required) 

(optional)

(required)