JavaScript and Ajax for the Web: Visual QuickStart Guide, Seventh Edition

Introducing the Document Object Model

On a Web page, the objects that make up the page (or document) are represented in a tree structure. You’ve seen this sort of thing before when building HTML pages; the top level of the page is contained in the <html> tag, and inside that you’ll find the <head> and <body> tags, with other tags within each of those, and so on. Some browsers can show you representations of this tree structure, as in Figure 1.7. JavaScript considers each of the items in the document tree to be objects, and you can use JavaScript to manipulate those objects. The representation of the objects within the document is called the Document Object Model (DOM).

Figure 1.7. You can see a document’s tree structure using the DOM Inspector, ...