-->
Bookmark and Share

Introduction to the Document Object Model

Review the W3C DOM2 standard recommendation.

Node Types

Before going further, it's probably a good time to explain node types in more detail. As mentioned, there are several types of nodes defined in the document object model, but the ones you'll mostly deal with for web pages are element, text and attribute.

Element nodes, as we've seen, correspond to individual tags or tag pairs in the HTML code. They can have child nodes, which may be other elements or text nodes.

Text nodes represent content, or character data. They will have a parent node and possibly sibling nodes, but they cannot have child nodes.

Attribute nodes are a special case. They are not considered a part of the document tree - they do not have a parent, children or siblings. Instead, they are used to allow access to an element node's attributes. That is, they represent the attributes defined in an element's HTML tag, such as the HREF attribute of the A tag or the SRC attribute on the IMG tag.

Note that attribute values are always text strings.

Attributes vs. Attribute Nodes

There are several ways to reference the attributes of an element. The reason for this is that the DOM2 standard was designed for many types of structured documents (i.e., XML documents), not just HTML. So it defines a formal node type for attributes.

But for all documents it also provides some more convenient methods for accessing, adding and modifying attributes, as described next.

The document.createAttribute() allows you to create a new attribute node, which you can then set a value for and assign to an element node.

var attr = document.createAttribute("myAttribute");
attr.value = "myValue";
var el = document.getElementById("myParagraph");
el.setAttributeNode(attr);

However, it's usually easier to access an element's attributes directly using the element getAttribute() and setAttribute() methods instead.

var el = document.getElementById("myParagraph");
el.setAttribute("myAttribute", "myValue");

An element's attributes are also represented as properties of the element node. In other words, you can simply use

var el = document.getElementById("myParagraph");
el.myAttribute = "myValue";
Browser Compatibility

Note that Internet Explorer 5.5 or earlier does not support the attribute node type, so methods like document.createAttribute() will simply not work while others like element.getAttribute() have spotty support. You can still access element attributes in the form element.attributeName however. IE 6.0 does support attribute nodes and associated methods and properties.

It's also interesting to note that you can define your own attributes in the HTML tag itself. For example,

<p id="myParagraph" myAttribute="myValue">This is a sample paragraph.</p>

...

alert(document.getElementById("myParagraph").getAttribute("myAttribute"));

will display "myAttribute." But note that you should use element.getAttribute(attributeName) instead of element.attributeName to get the value as some browsers may not register user-defined attributes as a properties of the element.

Attributes can also be removed from an element node, using either the removeAttribute() or removeAttributeNode() methods or setting by setting element.attributeName to a null string ("").

Altering attributes is one way to create dynamic effects. Below is a sample paragraph. Use the links to alter it's ALIGN attribute.

Text in a paragraph element.

Align Left | Align Right

The code is fairly simple:

<p id="sample1" align="left">Text in a paragraph element.</p>

... code for the links ...

document.getElementById('sample1').setAttribute('align', 'left');
document.getElementById('sample1').setAttribute('align', 'right');

Style Attributes

Most attributes for HTML tags are fairly simple, they define a single value for a property specific to that tag. Styles are a little more involved. As you know, CSS can be used to apply style parameters to an individual tag, all tags of a given type or assigned using classes. Likewise, styles for a particular element can be inherited from any of these sources.

You can also alter these styles at various levels. For example, you can change the STYLE attribute of an HTML tag, or it's CLASS attribute. But these methods will alter all of the element's style parameters. Often, you may want to change just a single style parameter, or a select few, while retaining the others.

Fortunately, the style attribute of and element node is defined as an object with properties for every possible style parameter. You can access and update these individual parameters as you wish. Here's an example similar to the previous one.

Text in a paragraph element.

Align Left | Align Right

But in this case, the text alignment is defined and altered using a style parameter instead of the ALIGN attribute. Here's the code behind it:

<p id="sample2" style="text-align:left;">Text in a paragraph
element.</p>

... code for the links ...

document.getElementById('sample2').style.textAlign = 'left';
document.getElementById('sample2').style.textAlign = 'right';

Note that when a CSS parameter name contains a hyphen ("-") as "text-align" does, its corresponding style property name is constructed by removing the hyphen character and capitalizing the first letter following it, in this case it becomes "textAlign."

Also note that even if a particular style parameter is not initially defined for an element, you can still set it's value using the DOM. For example, in the code above the inline style= on the P tag is really not necessary.