Login | Register   
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Use JavaScript and the DOM to Create Dynamic Web Pages

The Document Object Model (DOM) gives you access to all the elements on a web page. Using JavaScript, you can create, modify and remove these elements in the page dynamically.


advertisement
key to mastering the client side of rich Internet application (RIA) development is learning how to manipulate 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.

Chapter 10 of JavaScript for Programmers, excerpted here, introduces the DOM. Find out how to:

  • Use JavaScript and the W3C Document Object Model to create dynamic web pages.
  • Grasp the concepts of DOM nodes and DOM trees.
  • Traverse, edit, and modify elements in an XHTML document.
  • Change CSS styles dynamically.
  • Create JavaScript animations.

When you acquire these skills, you will be able to build robust client-side web applications.



Editor's Note: This chapter is an excerpt from JavaScript for Programmers by Paul J. Deitel and Harvey M. Deitel, published by Prentice Hall Professional, Mar. 16, 2009, ISBN 0137001312, Copyright 2009 Pearson Education, Inc. For more info please visit: www.informit.com/store/product.aspx?isbn=0137001312. Safari Books Online subscribers can access the book here: http://my.safaribooksonline.com/9780137013128.

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.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap