spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / experts / javascript / column42


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

Developer News
Sir Tim Talks Up Linked Open Data Movement
From L.A. to Vegas With 100GbE
Salesforce Rolls Out Big Summer '08 Update

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:

More Resources from Doc JavaScript
Columns Popular Columns Tips Tools
Latest Columns
41-50 | 31-40 | 21-30
11-20 | 1-10
Working with Windows
JavaScript and Frames
Bookmarklets
Random Tips
Personalized Tips
RSS Channels
Menu Builder
Rollover Builder
Rotation Builder
Reference Tip Categories (want one?)
Links
For Your Site
Did you learn something? Do you like this site? Please link to us!

http://www.internet.com

Produced by Yehuda Shiran and Tomer Shiran


JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
IBM eBook: Planning a Service Oriented Architecture
IBM eBook: Choosing the Right Architecture--What It Means for You and Your Business
Microsoft Article: Will Hyper-V Make VMware This Decade's Netscape?
Avaya Article: Using Intelligent Presence to Create Smarter Business Applications
Intel Go Parallel Article: Getting Started with TBB on Windows
Microsoft Article: 7.0, Microsoft's Lucky Version?
Avaya Article: How to Feed Data into the Avaya Event Processor
IBM Article: Developing a Software Policy for Your Organization
Microsoft Article: Managing Virtual Machines with Microsoft System Center
Intel Go Parallel Article: Intel Threading Tools and OpenMP
HP eBook: Storage Networking , Part 1
Microsoft Article: Solving Data Center Complexity with Microsoft System Center Configuration Manager 2007
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
HP Video: StorageWorks EVA4400 and Oracle
HP Webcast: Storage Is Changing Fast - Be Ready or Be Left Behind
Microsoft Silverlight Video: Creating Fading Controls with Expression Design and Expression Blend 2
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Red Gate Download: SQL Toolbelt and free High-Performance SQL Code eBook
Iron Speed Designer Application Generator
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
Silverlight 2 App and Walkthrough: Leverage Silverlight 2 with SQL Server and XML
IBM Article: Enterprise Search--Do You Know What's Out There?
HP Demo: StorageWorks EVA4400
Microsoft Article: The Progress and Promise of Deep Zoom
Microsoft How-to Article: Get Going with Silverlight and Windows Live
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES
webref The latest from WebReference.com Browse >
Book Review: Head First JavaScript · Web Hosting Control Panels · Use Your Blog for Fast Search Engine Rankings
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
NetApp's Virtual Storage Strategy Crystallizes · F/MC Watch: A Cisco-Centric Approach · Olympic Time Trials Use Wi-Fi Mesh


Created: June 21, 1999
Revised: July 10, 1999

URL: http://www.webreference.com/js/column42/