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";
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.
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.
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.