Please login or register. Welcome to the Studio, guest!


Quick Links:


newBookmarkLockedFalling

Aaron

Aaron Avatar
Bad Wolf

****
Dedicated Studio Member

859


November 2006
Introduction

What 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! :P 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 Hierarchy

The 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:



Nodes

There 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:

NamenodeType
Elements1
extnodes3
Attributes2
Comments8

...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 :P). 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 Hierarchy

The 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 element


Next 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 // textnode


Keep in mind that texts are nodes too. Many JavaScripters make this mistake and believe me, it shows. :P 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

Chris

Chris Avatar

******
Head Coder

19,519


June 2005
<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 element


I disagree with that part. White-space remember? Every browser interprets it differently. ;)

Anyways, a very nice tutorial covering DOM. :) Wish I had it when I was starting out....

I assume part 2 will cover createElement, createTextNode, createDocumentFragment, appendChild, replaceChild, etc.?

Aaron

Aaron Avatar
Bad Wolf

****
Dedicated Studio Member

859


November 2006
document.body.firstChild will grab whitespace in browsers like FF yeah. But this is an old tutorial. :P I just fixed up anything immediate and posted it since it's been sitting in my files for like a month. Same with the other 2/3 of it. :P

Nate

Nate Avatar

**
Official Member

85


July 2007
.grandParentNode? :P
Very nice Der.

Aaron

Aaron Avatar
Bad Wolf

****
Dedicated Studio Member

859


November 2006
nate said:
.grandParentNode? :P


Where are you getting that from? >_>

Chris

Chris Avatar

******
Head Coder

19,519


June 2005

Aaron

Aaron Avatar
Bad Wolf

****
Dedicated Studio Member

859


November 2006
Uh huh: "Let's take a family tree for example"

superkid

superkid Avatar
=]

****
Senior Member

265


June 2008
images?

Aaron

Aaron Avatar
Bad Wolf

****
Dedicated Studio Member

859


November 2006
I'm pretty sure I deleted them. This is a horrible tutorials anyway. :p

I'd like to direct you to brainjar.com for something proper.

newBookmarkLockedFalling