spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / javascript / ppk1

[next]

UNIX System Administrator - SUN Solaris, Veritas, EMC, Shell Scripting, SAN (NYC)
Next Step Systems
US-NY-New York

Justtechjobs.com Post A Job | Post A Resume
Developer News
ActiveState Debuts Open Source Business Suite
Salesforce Offers Visual App Builder
Codesion Steps Out From CVS's Shadow


PPK on JavaScript: The DOM - Part 1

By Peter-Paul Koch

JavaScript allows you to restructure an HTML document, for instance by adding, removing, or reordering the items shown on the page. In fact, without the possibility of restructuring the document, or at the very least providing some feedback (such as text in a form field or an image swap), JavaScript is pretty much worthless.

The example script that best demonstrates this restructuring is Sandwich Picker. Users can quickly and easily specify the sandwiches they want to order, and the script gathers the data by moving the s that contain sandwiches to the order table—in other words, by changing the document structure.

To change anything on a page, JavaScript needs access to all elements in the HTML document. Allowing this access and providing for methods and properties to query the current status of the HTML elements, or to add, move, or remove HTML elements, is the job of the Document Object Model, or DOM.

We discussed DOM history in 1C, but it's useful to repeat a few fundamentals. Since without a DOM JavaScript is worthless, the earliest JavaScript browsers already allowed limited access to a few HTML elements, most notably form fields and images. This old way of doing things is called the Level 0 DOM, and it was a part of the de facto Netscape 3 standard. Nowadays the Level 0 DOM is used only for form manipulation, for which it remains better equipped than its successor (see 8J).

In 1998, W3C published its Level 1 DOM specification, which allowed access to and manipulation of every single element in an HTML page, from the document itself to the lowliest text node. Better still, all browser vendors actually implemented this recommendation, and as a result, incompatibility problems in the DOM have almost (but not entirely) disappeared.

The W3C Level 1 DOM was created to allow any programming language to read and change XML documents. Since properly written XHTML is XML, and properly written HTML can be interpreted as such, the DOM can also be used by JavaScript to read and change HTML documents.

The greater part of this chapter discusses the Level 1 DOM, but we'll also take a look at the old Level 0 DOM, especially at its useful form-field properties.

We'll mainly use Sandwich Picker and Usable Forms as examples, since these scripts use the document-restructuring possibilities of the Level 1 DOM to the greatest effect.

XML Documents: Remember: the W3C DOM can also be used on XML documents. We'll discuss an example of this in 10B and 10C.

W3C DOM Compatibility Tables: As you'll notice in this chapter, the W3C DOM implementation of the browsers are occasionally incompatible. In order to guide Web developers through this maze of problems, I set up the W3C DOM Compatibility Tables at www.quirksmode.org.

A: Concepts

Before we delve deeply into the DOM, let's discuss a few general concepts.

Nodes

To the W3C DOM, everything in an HTML document is a node. The entire document is a document node; every HTML tag, such as <body>, <p>, or even <br />, is an element node; and the texts contained in these elements are text nodes. Furthermore, HTML attributes like ID are attribute nodes, and even comments are comment nodes.
home / programming / javascript / ppk1

[next]


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Use Web Caching to Make Your Web Site Faster · Creating an Online Shopping Cart Mechanism in PHP · Log JavaScript Errors Using an AJAX-driven Web Service
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Configuring Granular Settings for a Database Level Audit · The Perils of a Web 2.0 Transition on Your Business Processes · Facebook Redesigns Site —Again — Nears 400M Mark

URL: