Chapter 3
The Document Object Model
WHAT YOU WILL LEARN IN THIS CHAPTER:
- Looking at your document as a tree
- Accessing the DOM from your code
- Editing your document from the DOM
A web page is an HTML document containing markup tags and content. But, as you develop web apps, you’ll find it more helpful to think of the document as a tree-like structure filled with branches, limbs, and leaf nodes. This “document as hierarchy” concept is exactly what is meant when you hear the term Document Object Model (DOM).
In this chapter, I introduce you to the DOM and walk you through the basics you need to access and manipulate the DOM from your application code.
WHAT IS THE DOM?
The Document Object Model provides a scripting interface into an HTML document so that you can work with all of its elements within a hierarchical structure. As a result, you can navigate through the document structure with JavaScript to access and manipulate anything inside it.
The DOM is a standard that was originated by the W3C, the Web standards body. There are three DOM levels:
- Level 1: Level 1 contains the core functionality to be able to script the DOM for an HTML or XML document. Any modern browser provides support for the Level 1 version of the DOM.
- Level 2: Level 2 support extends DOM support to include new core functionality, event listeners, and CSS DOM. Safari and other browsers provide generally strong support for most aspects of DOM2.
- Level 3: Level 3 adds support for newer properties and methods, keyboard ...
