DOM

DOM and JavaScript

The Document Object Model (DOM) is a standard that governs programmatic access to document structures in XML and HTML documents. The DOM standard itself is independent of the programming language. This presentation only covers the JavaScript implementation of DOM.

DOM Structure

The DOM structure is a Composite structure representing the contents of a web page. It consists of the following types of elements:

HTML tag elements, one type for each type of HTML tag, such as HTMLHeadElement,
Comment elements that hold the contents of HTML comments, and
Text elements that hold text that appears between tags.

Accessing the DOM Structure

For JavaScript running in a browser, the displayed document can be accessed through the document global variable. This is not itself part of the Composite structure (it has type HTMLDocument), but it does provide access to the structure through its variable document.documentElement. This is an element of type HTMLHtmlElement, representing the <html> tag and its contents.

Usually, document elements are accessed by invoking search methods that are provided by the document variable. Element methods give JavaScript programmers the capability of adding and removing children and modifying their attributes such as their HTML class and their ids. The textual content of a Text element is easily modified by altering one of its attributes. Comment elements are rarely accessed since they do not affect the display of a web page.

The attributes of elements in a document hierarchy can often be modified by JavaScript code. Assigning a new value to an attribute works like using a setter method in Java - it can have side effects. All modifiable attributes that affect the display of a document have updating the display as a side effect.

In this presentation, all attributes are modifiable except those that are described as read-only.

Inheritance in the DOM Model

DOM standards describe interfaces for various types of objects. The description is given assuming a class-based language, but it can be bound to any object-oriented language, including classless languages. All that DOM standards require is that the binding behaves as if the various DOM classes inherit from other classes. That is, objects of given DOM type have all attributes and methods of its parent classes.

When you read documentation about DOM and its JavaScript bindings, it is useful to know a little bit about the implied DOM class hierarchy because you may have to search up the inheritance ancestry to find the attributes and methods that an object has. This search has already been done for the attributes and methods described in this presentation, but it only scratches the surface. More complete documentation for a DOM class usually only describes attributes and methods added by the class.

The Node Hierarchy

For the DOM classes described in this presentation, the Node hierarchy is as follows.

All HTML tag element classes are subclasses of HTMLElement.
HTMLElement is a subclass of Element.
Element is a subclass of Node.
Text and Comment are subclasses of CharacterData.
CharacterData is a subclass of Node.

The Document Hierarchy

For the DOM classes described in this presentation, the Document hierarchy is simple.

HTMLDocument is a subclass of Document.

The `document` Variable

The document global variable has type Document. It has the following useful attribute:

document.documentElement - the root of the document hierarchy: the <html> tag and its contents.

The document variable is usually a HTMLDocument. Then it has the following additional attribute:

document.body - the body of the document: the <body> tag and its contents.

Any Document object has the following useful methods:

getElementById(id) - returns the HTML element whose id attribute is id. The entire document hierarchy is searched.
getElementsByTagName(tagName) - returns an array of HTML elements whose tag name is tagName. The entire document hierarchy is searched.
createElement(tagName) - creates an HTML element with tag tagName.
createTextNode(text) - creates a Text element with content text.

Elements

All of the elements in the document hierarchy have the following useful attribute:

element.childNodes - a read-only array containing the children of element. The size of this array is element.childNodes.length. Although the array is read-only, it can be manipulated using methods described below.

All of the elements in the document hierarchy have the following useful methods:

getElementsByTagName(tagName) - returns an array of HTML elements whose tag name is tagName. The entire descendent hierarchy is searched.
appendChild(element) - appends element at the end of the childNodes array.
removeChild(child) - removes child from the childNodes array.
replaceChild(newChild, oldChild) - replaces oldChild in the childNodes array by newChild.

Nodes are not created by invoking constructors. They are created by invoking the Document methods createTextNode() and createElement().

HTML Tag Elements

All of the HTML tag elements have the following useful attributes:

element.id - the identifier for element.
element.className - the HTML class for element.
element.innerHTML - the HTML text inside element.
element.style - the style object for element. The style object has an attributes corresponding to each of the CSS attributes. Setting one of these attributes immediately changes the visual appearence of element.

The first two attributes are often specified directly in HTML as in the following example:

      <div id="theDiv" class="theClass">
        …
      </div>

Other attributes specified directly in HTML are also accessible as element attributes in JavaScript. Usually the attribute names are the same, but a few, such as class, are modified to avoid JavaScript keywords.

The HTML tag elements have no frequently used methods other than those shared by all elements.

getElementsByTagName(tagName) - returns an array of HTML elements whose tag name is tagName. The entire descendent hierarchy is searched.
appendChild(element) - appends element at the end of the childNodes array.
removeChild(child) - removes child from the childNodes array.
replaceChild(newChild, oldChild) - replaces oldChild in the childNodes array by newChild.

Text Nodes

Text nodes in the document hierarchy have the following useful attribute:

textNode.data - a string containing the text for textNode.

The data attribute of a text node can be manipulated like any other JavaScript string. You do not need to (and should not in most cases) use HTML character entities such as "<", ">", and "&". Just use "<", ">", and "&".

DOM and JavaScript

DOM

DOM Structure

Accessing the DOM Structure

Inheritance in the DOM Model

The Node Hierarchy

The Document Hierarchy

The `document` Variable

Elements

HTML Tag Elements

Text Nodes

Books

Online References

DOM and JavaScript

DOM

DOM Structure

Accessing the DOM Structure

Inheritance in the DOM Model

The Node Hierarchy

The Document Hierarchy

The document Variable

Elements

HTML Tag Elements

Text Nodes

Books

Online References

The `document` Variable