JavaScript® Programmer's Reference

Chapter 13. The Document Object Model

When you consider the level to which object-oriented design principals have been baked into JavaScript the language, it should come as no surprise that the way web pages themselves are represented in memory is much the same. The Document Object Model (DOM) is a largely vendor-independent collection of objects and APIs for representing both HTML and (believe it or not) XML documents. The DOM is your gateway to the contents of a web page — and the key to making your pages come alive with JavaScript.

The DOM is also an extremely detailed resource from which you can determine just about anything about the content and layout of a web page. Every single element of the page is described in the model, including tables, forms, and text. Very detailed information about those elements is also accessible, including the styling of objects, the sizes and positions of nodes, whether or not there are scrollbars on elements, where hyperlinks point to, and so on. It even provides a complex event model (which you've already looked at) that lets you add a layer of interactivity to your pages — making them more than mere static canvases.

I've already introduced you to many aspects of the DOM, including the document object, DOM nodes, element IDs, and so on. For example, you've already looked at how events let you tap into key moments of interaction on a page. Now you'll complete your understanding of how to query a document, navigate it, and change it. You'll also ...