Exploring DOM using Javascript

The Document Object Model (DOM) is a tree-based API for XML. It’s main focus isn’t just to parse XMLcode, but rather to represent that  using a series of interlinked objects that can be modified and  accessed directly.

DOM is a language-independent API, meaning that it is not tied  to  Java, JavaScript, or any other language in examples I’ll  use javascript to access and manipulate  it.

Regular HTML is not valid XML; however, most modern Web browsers are forgiving and still parse an HTML document into a proper DOM document.

When talking about DOM trees , you are really talking about a hierarchy of nodes. These are some objects  Inside XML(XHTML,HTML) document :

document –  is very top level node wich contains all other nodes

element  –  represents the contents of a start tag and end tag

Attr —  Represents an attribute name-value pair

Text — Represents plain text in an XML document contained within start and end tags  or inside of a CData Section

CDataSection — The object representation of <![CDATA[ ]]>. This node type may contain any symbols including quotes.

To manipulate this obects i.e makes changes in XML(XHTML, HTML) we have some properties and methods:

nodeName    –  The name of the node

nodeValue     –  The value of the node

nodeType     –  One of the node type constant values

ownerDocument  – Pointer to the document that this node belongs to

firstChild  –  Pointer to the first node in the childNodes list

lastChild  – Pointer to the last node in the childNodes list

childNodes – A list of all child nodes

previousSibling – Pointer to the previous sibling; null if this is the first sibling

nextSibling   – Pointer to the next sibling; null if this is the last  sibling

hasChildNodes()   – Returns true when childNodes contains one or more nodes

attributes  – Contains Attr objects representing an element’s attributes; only used for Element nodes

appendChild(node) –  Adds node to the end of childNodes

removeChild(node) –  Removes node from childNodes

replaceChild (newnode, oldnode)  —  Replaces oldnode in childNodes with  newnode

insertBefore (newnode, refnode)  — Inserts newnode before refnode in childnodes

Let’s think about Javascript , what does this language. It’s main jobs is to manipulate HTML tegs, it can access and modify tegs, it has DOM

support i.e  we can access nodes(tags) and make modifications. There are three functions in Javascript to do this: getElementsByTagName(),

getElementsByName() and   getElementById().  The last one is my favourite it gets html tag by id, represents it as an object so we can dynamically  manupulate it. Other two functions do same thing but they are looking to name and tagname.

Let’s do some example to demonstrate functions and properties mentioned before.

Adding nodes  using DOM:

In idex.html  we have form tag with textarea and submit button inside

<body>

<form action=”#”>

<p>

<textarea rows=”5″ cols=”30″>

</textarea>

<br/>

<input value=”Add Text” />

</p>

</form>

</body>

In script.js addNode()  function is triggered on form submit it gets value of textarea, creates text node then paragraph tag and appends all these

as child of body tag.

window.onload=initAll;

function initAll()

{

document.getElementById(“form1”).onsubmit=addNode;

}

function addNode()

{

var inText=document.getElementById(“textarea”).value;

var newText=document.createTextNode(inText);

var newGraf=document.createElement(“p”);

newGraf.appendChild(newText);

var docBody=document.getElementsByTagName(“body”)[0];

docBody.appendChild(newGraf);

return false;

}

Every time we click  on  “Add Text”  button  textarea’s value will be added below just like this:

javascript_dom

If we want to delete some node for example last node we can write other function  delNode() , this function will be triggered on

“Delete Last Paragraph”  link click.

document.getElementById(“deleteNode”).onclick=delNode;

function delNode()

{

var allParagraphs=document.getElementsByTagName(“p”);

if (allParagraphs.length>1)

{

lastParagraph=allParagraphs.item(allParagraphs.length-1);

var docBody=document.getElementsByTagName(“body”)[0];

var removed=docBody.removeChild(lastParagraph);

}else {

alert(“Nothing to remove”);

}

}

Advertisements

3 Responses

  1. I love your fill

  2. I would like to read more stuff like this one

  3. Wow , fantastic post .I m very happy I ve found your blog , bookmarked!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: