The Document Object Model (DOM), Part III: HTML-DOM Mismatches

The Document Object Model (DOM), Part III: HTML-DOM Mismatches

In the last two columns we covered the ins and outs of the Document Object Model, supported by Internet Explorer 5.0 and up, and by Netscape's Gecko. We taught you how to analyze a document and how to synthesize its DOM. We focused in those two columns on the great advantages of the DOM and how the DOM is going to change the way we design Web sites. In those two columns we covered the basics of the DOM, i.e. what does a DOM look like and what are the properties it supports. Before we embark on the dynamics of the DOM in our next columns, we thought it will be beneficial to show you those cases where the DOM does not match the document's HTML. An HTML-DOM mismatch occurs when the tree drawing you make out of the HTML page does not match the DOM created by the browser for that page.

There are two main reasons for such mismatches. The more common cause is an illegal HTML. You can author an HTML page that includes illegal constructs without even noticing it. The browser uses its judgement on how the page should look like and creates a DOM that reflects the corrected page. We'll show you a simple document that includes an illegal HTML construct, and how Internet Explorer generates a DOM that reflects the corrected HTML content of the very same page. There is also a bug in Internet Explorer's implementation of the DOM that causes an HTML-DOM mismatch. We'll show you a minimal document example that demonstrates the bug, and we'll complement it with detailed DOM drawings of the correct and buggy cases. This column serves several purposes. First, you'll be more aware of HTML errors that create HTML-DOM mismatches. Second, you'll become more sensitive to bugs in Internet Explorer's implementation of the DOM, as we probably did not uncover all of them. Third, you'll learn to workaround the bug we did revealed. Lastly, you'll have an opportunity to synthesize the DOM of a few more document examples.

In particular, you'll learn:

• How to recognize the <FONT> bug..
• How to draw the correct object structure of a <FONT>-tainted document.
• How to draw the buggy object structure of a <FONT>-tainted document.
• How to recognize an illegal HTML construct.
• How to draw the object structure of an illegal HTML page.
• How to draw the object structure of the corrected HTML document.