Description
This articles is intended to introduce DOM scripting and demonstrate the benefits of exploiting the Document Object Model.
The term DOM scripting refers to programmatically accessing and updating the Document Object Model. This term typically implies accessing the document with the use of javascript. However, DOM scripting can be done with any programming language that supports the Document Object Model. For instance, CSS instructs the browser on how to display the objects of the document.
Document
The Browser needs a document in order to turn it into an object that is compliant with DOM specifications. But what tells the Browser that you have a document or that your document was coded to the correct specifications and do follow the Object Model? The DOCTTYPE (also called a DTD) does just that. It is very important to declare your intended DTD in every web page. Without one, it will be up to the browser to determine how it will interpret your document, and this will lead to inconsistencies and broken code.
Object
If you ask anyone, an object is an instance of a class. But what does that mean? To put it simply, an object is a name given to a collection of data that can be accessed or modified through properties and methods. Objects can be user-defined, native to the language or provided by the environment in our case the browser. Most people probably never thought about the Browser Object Model. It is what gives you the window object and is responsible for methods such as window.alert,window.open,etc...
Model
The DOM model is a blueprint or map of the document. Below represents the beginning of the map's structure. There are way to many elements to list.
html
head body
Notice how "head" and "body" are underneath the "html" element or root. We refer to elements like these as children. The element "head" and "body" are considered siblings of each other. What do you think would be the child nodes of "head"? The child nodes would be "meta" and "title". Did I just say node?
What is a node? A node is a term that denotes a point of connection or distribution within a network.
A network is a collection of nodes. There are 12 different node types, but in this article we will only cover the main ones. That is, the element node, attribute node and text node.
Element Nodes
Element nodes make up the basic structure of a document. Elements can contain other elements. The only element that isn't contained within another element is the <html> element which is considered the root node of our node tree. There are two well-known methods for retrieving elements:
- getElementsById
- getElementsByTagName
Example:
<p id="p1" >I am a paragraph</p>
<script type="text/javascript" language="javascript" >
alert(document.getElementById("p1").innerHTML);
</script>
The example above will alert "I am a paragraph".
Attribute Nodes
Attribute nodes are used to define properties or give more specific information about the element node. For instance,
<span style="margin-left:10px" > I am a label</span>
The attribute node in the example above is "style" with a value of "margin-left:10px."
There are also two popular methods for attribute nodes:
- getAttribute
- setAttribute
Example:
<input id="txt" type="text" maxlength="25" />
<script type="text/javascript" language="javascript" >
alert(document.getElementById("txt").getAttribute("type"));
</script>
Text Nodes
Text nodes are always enclosed inside of element nodes. In the example above the text node would be "I am a label".
The purpose of this article was to introduce you to DOM scripting. You can view other articles on this topic to get a more in depth understanding of how to be a true DOMster.
1 comments:
Just a quick note here, setAttribute is not understood by all browsers. For an example, setAttribute does not work in IE6, and you have to access the property directly.
Post a Comment