HTML5, JavaScript, and jQuery 24-Hour Trainer

Lesson 16

Document Object Model

The Document Object Model (DOM) and the DOM API have been mentioned several times already in this book, but now it's time to step back and look at them in depth.

As you will see over the next few lessons, you can largely avoid an in-depth understanding of the DOM API if you use jQuery. jQuery is essentially a wrapper around the DOM; it provides all the same basic functionality but with a more intuitive API.

It is, however, wise to have at least a basic understanding of how the underlying DOM ­technology works before starting with jQuery because this places it in a wider context, and helps you understand what jQuery is trying to achieve.

Nodes and Objects

The Document Object Model is the in-memory browser representation of a web page. When the browser loads a web page, it parses all the HTML tags and their content, and generates a model for display in the browser.

As you have already seen, the DOM model may differ from the literal HTML in several ways. For example:

• It will close any unclosed tags, such as self-closing tags.
• It will convert attribute names to lowercase.
• It will rearrange tags closed in the wrong order, per the rules in the HTML5 specification.
• It will add certain tags that may be missing such as the body tag.

You have also seen how the DOM is represented as a tree-like structure via the Elements tab in the Chrome developer tools.

The DOM is actually more complex than the Elements tab implies. In order to ­understand the DOM, ...