DOM Test — Differences Between the Handling of Whitespace by Popular Browsers

This page runs some Javascript to see how browsers handle the whitespace in the test markup when generating a DOM tree.

Test Markup

Paragraph one

Paragraph two

List item one
List item two

Table cell one

Table cell two

Your browser will need to support the DOM and have Javascript enabled in order to test its handling of whitespace.

Previous Tests’ Results

These are the results from tests run on a Windows PC in a few browsers.

Opera 8.54/9.26/9.50 Beta (9815)

paragraphs[0].nextSibling.innerHTML: undefined; Points to the whitespace between <p> elements
orderedList.firstChild.nextSibling.innerHTML: List item one
table.rows[0].cells[1].innerHTML: Table cell two
table.rows[0].firstChild.nextSibling.innerHTML: Table cell two

Firefox 2.0

paragraphs[0].nextSibling.innerHTML: undefined; Points to the whitespace between <p> elements
orderedList.firstChild.nextSibling.innerHTML: List item one
table.rows[0].cells[1].innerHTML: Table cell two
table.rows[0].firstChild.nextSibling.innerHTML: Table cell one

Safari 3.1

paragraphs[0].nextSibling.innerHTML: undefined; Points to the whitespace between <p> elements
orderedList.firstChild.nextSibling.innerHTML: List item one
table.rows[0].cells[1].innerHTML: Table cell two
table.rows[0].firstChild.nextSibling.innerHTML: Table cell one

MSIE 6.0/7.0

paragraphs[0].nextSibling.innerHTML: Paragraph two; Skips the whitespace in‐between tags and points to the next <p> element
orderedList.firstChild.nextSibling.innerHTML: List item two
table.rows[0].cells[1].innerHTML: Table cell two
table.rows[0].firstChild.nextSibling.innerHTML: Table cell two

Summary

When building the DOM tree, MSIE ignores whitespace in‐between elements using the same rules it uses to decide whether to render it on screen or not. Typically this means that whitespace in‐between block‐level elements or table elements is ignored and won’t show up in the DOM tree as a text node containing whitespace characters.

Firefox and Safari add all whitespace to the DOM tree, including that which appears between block elements and even table elements (if each table cell or row is placed on a different line in the markup, for example), even though, according the HTML specs, the only meaningful contents of a cell row is one or more cell elements (comments not withstanding, though I see the point in adding them as DOM nodes). The same applies to other elements which are only allowed to contain child elements and not text content.

Opera will add whitespace to the DOM tree between elements, even block‐level elements which aren’t supposed to have text content placed directly in them (such as <dl> or <body> elements). However, it ignores whitespace in‐between table elements, meaning that if different cells are placed on separate lines, the nextSibling of each cell will be the next cell in the row (like MSIE) rather than a text node containing the whitespace of the line break and tabs between cells (like Firefox and Safari).

So, put simply, MSIE creates a DOM that closely corresponds the content displayed on the screen while Safari and Firefox create a DOM that closely corresponds to the source text. Opera generally behaves like Firefox and Safari, except when it comes to table markup, where it behaves like MSIE.

I don’t really see the benefit of all those surplus whitespace text nodes on the DOM so I probably prefer MSIE’s behaviour in this instance (though it has plenty of DOM problems elsewhere), but I’m more than happy to settle for consistent DOM behaviour across major browsers.

Placement of Dynamically Generated Table Footers

The order of table rows on the DOM is at odds with the order of table headers, footers and bodies. The details of this are being re‐written and will appear shortly but Opera, Safari and MSIE behave share the same behaviour while Firefox does something different.

Using colSpan and rowSpan Properties

And on a loosely related note, just in case it’s of use to anyone else, MSIE will abort a script which attempts to set a cell’s colSpan or rowSpan to a value of zero or below. Under the same circumstances, Opera, Firefox and Safari set the value to 1 instead and continue running the script.

Last updated, 17th March 2008.