1. Computing

Two DOMs

The HTML and XHTML Document Object Models

From , former About.com Guide

There are two completely different Document Object Models that can be used with JavaScript. One of these is for use with HTML and the other is for use with XHTML. Depending on how you write your JavaScript you can make it either relatively easy or extremely difficult to convert from using the HTML DOM to using the XHTML DOM.

The reason for this is that there are actually a number of ways to update an HTML web page using commands which are not strictly speaking a part of the DOM at all but which do work provided that your web page is written in HTML. There are some issues with regard to using these commands as well as the standard HTML DOM commands in the same page but generally provided that you do not try to write to the page using one method and then read back using a different one you can work around such issues. It is actually these non-standard commands that will cause the most difficulty though if you decide to convert your page to XHTML.

The simplest of these non-standard commands is document.write() which can be used to write HTML content into your web page prior to the page finishing loading. This command has been around since JavaScript was created, is a really simple one for beginners to understand, and is useful for outputting debugging messages into your page if you don't want to use a proper debugging tool. Apart from that there is no reason for using such code in a web page any more since all browsers in current use support much better ways of updating the content of the page. The only scripts that I have that use this method are ones written back when not all browsers in common use supported the better ways of doing things and I haven't yet got to them in rewriting them to make them less obtrusive.

The better non-standard way of updating an HTML page from JavaScript is to use document.getElementById(x).innerHTML to update the content of a tag with a specific id. Some browsers place limits on where you can use this command (for example you can't use it to update a part of a table in Internet Explorer, you need to either replace content within a cell or the entire table). There are also issues with being able to dynamically interact with a part of the content that you insert using this method as it doesn't update the DOM to make those tags accessible. It does make things easier though in many instances where you need to update parts of your web page and where there are too many tags and attributes involved for you to want to use the standard DOM method which requires you to define each separately.

Related Video
How to Properly Pour Different Beers
Computer Cable Ports 101

©2013 About.com. All rights reserved.