The Document Object Model provides the most flexible way for JavaScript to interact with the HTML in your web page (and the only way to interact if you are using XHTML). What isn't so obvious though is that the DOM and the HTML are actually two separate things and that what is in one is not necessarily an exact match to what is in the other.
There are a couple of ways that these differences can occur annd if you are not aware of them then the interactions that your JavaScript has with the web page may not give you the results that you expect.
One of these is a difference between your source HTML and what is in the DOM before you even start to interact with the page from JavaScript. There are a number of HTML tags that are labelled as optional in the HTML standards. These tags are optional because you can leave them out of the HTML source. They are not optional in the DOM and where the tags are left out of the source the browser will still add the corresponding elements to the DOM. This means that the DOM will always contain elements for <html>, <head>, and <body> for every HTML page whether you specify those tags in your HTML source or not. Also whenever you have a table in your page there will always be a <tbody> element aournd the rows the table contains even if you leave that tag out of your source.
Note that this does not apply to XHTML where the html, head and body tags are mandatory rather than optiona and so must appear in your HTML source. he tbody tag is optional in XHTML and if omitted then the browser will NOT add it.
The simplest way to resolve this difference is to always include the optional tags in your HTML. If you do that then the HTML and DOM will always match at the start.
The other aspect to how the DOM works that can lead to confusion is what happens when you start updating the page from JavaScript. If you mahe the updates using the standard DOM calls then the updates will be made first to the DOM. Any changes that are made to the DOM are then applied to the copy of the HTML that the browser is working with modifying it from the source version originally supplied. If you use the innerHTML command to update the HTML directly then any changes that you make are not applied to the DOM and you now have the HTML and the DOM no longer matching up and so will get unexpected results if you try to access that part of the page from the DOM where changes have been made only to the HTML. The same situation can also apply in reverse where innerHTML cannot be used to update the content of an element originally added through the DOM.
The way to make sure this doesn't create problems is to be consistent in the way that you interact with a given web page. Choose one method to update the page (either innerHTML or the DOM) and use that method consistently for all updates. Only use innerHTML where you know that the subsequent JavaScript is not going to need to reference anything contained within the content you are inserting.
By understanding how the HTML and the DOM are not always the same and writing your code so as to ensure that they are the same (or so that the differences don't matter) will help you to avoid the problems that might arise where the difference between the two causes unexpected problems in your JavaScript processing that may be difficult to resolve.
