JavaScript and the Document Object Model (DOM)

• By Harvey M. Deitel and Paul J. Deitel
• Apr 21, 2009
• Sample Chapter is provided courtesy of Prentice Hall

This chapter is from the book
JavaScript for Programmers

• Our children may learn about heroes of the past. Our task is to make ourselves architects of the future.
• —Jomo Mzee Kenyatta

• Though leaves are many, the root is one.
• —William Butler Yeats

• The thing that impresses me most about America is the way parents obey their children.
• —Duke of Windsor

• Most of us become parents long before we have stopped being children.
• —Mignon McLaughlin

• To write it, it took three months; to conceive it three minutes; to collect the data in it—all my life.
• —F. Scott Fitzgerald

• Sibling rivalry is inevitable. The only sure way to avoid it is to have one child.
• —Nancy Samalin

10.1 Introduction

In this chapter we introduce the Document Object Model (DOM). The DOM gives you access to all the elements on a web page. Inside the browser, the whole web page—paragraphs, forms, tables, etc.—is represented in an object hierarchy. Using JavaScript, you can create, modify and remove elements in the page dynamically.

Previously, both Internet Explorer and Netscape had different versions of Dynamic HTML, which provided similar functionality to the DOM. However, while they provided many of the same capabilities, these two models were incompatible with each other. In an effort to encourage cross-browser websites, the W3C created the standardized Document Object Model. Firefox, Internet Explorer 7, and many other major browsers implement most of the features of the W3C DOM.

This chapter begins by formally introducing the concept of DOM nodes and DOM trees. We then discuss properties and methods of DOM nodes and cover additional methods of the document object. We also discuss how to dynamically change style properties, which enables you to create many types of effects, such as user-defined background colors and animations. Then, we present a diagram of the extensive object hierarchy, with explanations of the various objects and properties, and we provide links to websites with further information on the topic.

Software Engineering Observation 10.1

With the DOM, XHTML elements can be treated as objects, and many attributes of XHTML elements can be treated as properties of those objects. Then, objects can be scripted (through their id attributes) with JavaScript to achieve dynamic effects.