Home > Articles > Open Source > Ajax & JavaScript

JavaScript and the Document Object Model (DOM)

  • Print
  • + Share This
The objects and collections in the W3C DOM give you flexibility in manipulating the elements of a web page. Paul J. Deitel and Harvey M. Deitel show you how to access the objects in a page, how to access the objects in a collection, and how to change element styles dynamically.
This chapter is from the book

This chapter is from the book

  • 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.

  • + Share This
  • 🔖 Save To Your Account