IntroductionWhat is DOM? DOM (The
Document
Object
Model) is an interface that allows you to access and manipulate the contents of a webpage (enabling you to create dynamics and interactivity). You know what this means don't you?! No more pop-up scripts!
Isn't it such a pain when all you can do with your JavaScripting knowledge is create prompts and confirmation boxes to execute events? Well, that's all about to change!
The Document HierarchyThe Document Object Model acts on a page's Document Hierarchy. Simply put, this hierarchy is a tree with branches of elements and texts. Let's take a family tree for example:
The grandparent has two children: parent1 and parent2. parent1 is a child of the grandparent but a parent of it's OWN children (just as parent2). parent1 has 2 children: child1a and child1b. parent2 has 3 children: child2a, child2b, and child2c. child1a is a sibling of child1b just as child2a, child2b, and child2c are siblings.
Document Hierarchies mock this concept. The difference being, instead of people, we have nodes:
<html>
<body>TEXT</body>
</html>
The HTML element has one child, the BODY element. The BODY element also has one child, the textnode "TEXT".
I'm sure you're now wondering what a textnode is. Well, in JS DOM a node is any element, text, comment, attribute, etc on a page. As I previously stated, the difference between a family tree and a document tree is that instead of people we have things called nodes.
<html>
<body>Are you a <b>web addict</b>?</body>
</html>
In this HTML document, the HTML element has one child, the BODY element. The BODY element has 3 children. The first is the chain of text "Are you a ". The second is the B element and the third is another text "?". The B element has one child of it's own. The text "web addict". In it's simplest form, the hierarchy for this document reads:
NodesThere are 12 different types of nodes defined in the DOM. Each one reads as an object and has it's own methods and properties. Some common types include:
Name | nodeType |
Elements | 1 |
extnodes | 3 |
Attributes | 2 |
Comments | 8 |
...what's a node type? Well, every node is assigned a nodeType property. For element nodes the nodeType property returns 1, for textnodes the nodeType property returns 3, for attribute nodes the nodeType property returns 2, and for comment nodes the nodeType property returns 8. Example:
<script type="text/javascript">
<!--
var retrieveType = document.body.nodeType;
if(retrieveType == 1) {
alert("The body is an element!");
}
//-->
</script>
This script grabs the body element and returns a nodeType in the variable retrieveType. It then uses a conditional to test wheteher or not the BODY has a nodeType of 1 (and it does
). The result will be a simple alert informing you what node you are dealing with.
Another handy property of nodes is nodeName. It returns the name of the node it is applied to.
<script type="text/javascript">
<!--
alert(document.body.nodeName);
//-->
</script>
When the nodeName property is applied to an element, it returns the element's name (in all caps). The above script will alert "BODY". However, when applied to textnodes, attribute nodes, or comment nodes nodeName returns either "#text", "#attribute", or "#comment".
Navigating the HierarchyThe document object holds hundreds of methods. The first few i'll be focusing on are firstChild, lastChild, childNodes, nextSibling, previousSibling, and parentNode.
<html>
<body>TEXT</body>
</html>
Let's say we grabbed the BODY element in the above document: document.body. Now let's say we wanted to grab the BODY element's firstChild: document.body.firstChild.
object.firstChild - returns the first child of it's respective object.
object.lastChild - returns the last child of it's respective object.
object.childNodes - returns an array of the childNodes in it's respective object (e.g. object.childNodes[0] is the same as object.firstChild).
object.nextSibling - returns the next sibling declared in the hierarchy of it's respective object.
object.previousSibling - returns the previously declared sibling in the hierarchy of it's respective object.
object.parentNode - returns the parent of it's respective object.The firstChild method grabs the first node listed within the object it is applied to. The lastChild method grabs the lastChild listed. When there is only one child within a node, firstChild and lastChild return that same node. The childNodes method returns an array of the children contained within a node. We grab these children based on their position. For example,
object.firstChild is the equivalent of
object.childNodes[0]. The nextSibling method grabs the sibling of the object listed directly after it. The previousSibling method grabs the sibling listed directly
before the object. And lastly, there's parentNode (opposite of firstChild). This method grabs the parent of the object it is applied to. A little confused? Don't worry, i'll run through some examples. =)
<html>
<body><b>Java</b><i>Script</i></body>
</html>
Alright, the HTML element has one child, the BODY element. And this BODY element has two children, a B element and an I element. The B and I element's each have one child.
document.body.firstChild // B element
document.body.childNodes[0] // B element
document.body.lastChild // I element
document.body.childNodes[1] // I element
document.body.firstChild.nextSibling // I element
document.body.lastChild.previousSibling // B element
document.body.parentNode // HTML elementNext example:
<html>
<body><b>Hello</b> <i>there</i></body>
</html>
document.body.firstChild // B element
document.body.childNodes[1] // textnode
document.body.firstChild.nextSibling // textnode
document.body.lastChild // I element
document.body.lastChild.previousSibling // textnodeKeep in mind that texts are nodes too. Many JavaScripters make this mistake and believe me, it shows.
Now what-say we write up a code that's actually useful?
<html>
<body><b>Hello</b> <i>there</i></body>
</html>
<script type="text/javascript">
<!--
var gBody = document.body; // grab the BODY element
for(var i = 0; i < gBody.childNodes.length; i ++) { // loop through it's children
if(gBody.childNodes.nodeType == 1) { // check if child is an element
alert(gBody.childNodes.nodeName); // alert the element's nodeName
}
}
//-->
</script>
Remember, childNodes returns an array of the children in the object it is applied to. I simply took advantage of that by using a for loop to loop through ALL the children. I also used a conditional that questions whether or not the child is an element. When or if childNodes
returns an element, we will recieve an alert stating it's nodeName.
Last Edit: Jul 8, 2006 18:02:10 GMT by Aaron