Javascript - Document Object Model Manipulation

Simply copy and paste the following code inside an html page and run it from a browser (tested on IE & Mozilla).
If you want to see the live result (we believe this is the best way to learn what is the script about), try it here (new window).

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>DOM example</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <script type="text/javascript"> /*focus on the appendChild, nodeName, nodeType, childNodes and nodeValue functions and learn that we can get the child out of the parent and retrieve the parent from the child...*/ function insert1() { var folder=document.getElementById('fold1part'); var fchild=document.getElementById('link1'); folder.appendChild(fchild); } function insert2() { var folder=document.getElementById('fold2part'); var fchild=document.getElementById('link1'); folder.appendChild(fchild); } function insert3() { var folder=document.getElementById('fold3part'); var fchild=document.getElementById('link1'); folder.appendChild(fchild); } function display() { var action=document.getElementById('action'); var folder=document.getElementById('fold2part').childNodes; action.innerHTML=""; var i=0; for (i=0;i < folder.length;i++) { //if the node type is text, do not display as there is not child (http://developer.mozilla.org/en/docs/DOM:element.nodeType) if(folder[i].nodeType != 3) action.innerHTML+=folder[i].nodeName + ' (' + folder[i].childNodes[0].nodeValue + ')\n'; } } function chgparent() { //we change the color of the whole parent box var folder=document.getElementById('link1').parentNode; folder.style.color = 'red'; } </script> <style type="text/css"> #fold1part{background-color:lightgray;} #fold2part{background-color:yellow;} div{margin-bottom:30px} #link1{background-color:cyan} </style> </head> <body> <h1>Document Object Model - Simple Examples</h1> <p>There are 3 div boxes including links except one which is empty (the third one), the functions will act on the link number one...</p> <div id="fold1part"> <span id="link1">Link 1</span> <span id="link2">Link 2</span> <span id="link3">Link 3</span> </div> <div id="fold2part"> <span id="link4">Link 4</span> <span id="link5">Link 5</span> <span id="link6">Link 6</span> </div> <div id="fold3part"> </div> <p>Just click the following buttons to see their function:</p> <input type="button" onclick="javascript:insert1();" value="Insert in 1" /><br /> <input type="button" onclick="javascript:insert2();" value="Insert in 2" /><br /> <input type="button" onclick="javascript:insert3();" value="Insert in 3" /><br /> <p> <input type="button" onclick="javascript:display();" value="Display" /><br /> <input type="button" onclick="javascript:chgparent();" value="Change Parent Color" /><br /> </p> <div id="action"></div> </body> </html>

These manipulations introduce the document hierarchy with few useful functions you can retrieve and use for different effects.
You can find additional information onto http://msdn.microsoft.com/.../domoverview.asp and http://www.mozilla.org/docs/dom/

Comments

Post the first comment now
or discuss about it at this address:
Forum - Javascript

Webmaster Corner

The Millionaire league
Dozens of Easy and Automatic Ways to Make Money Online Everyday!

Niche Annihilation Method
Crush Your Competition!
Download the method Now

iPowerWeb
Incredible Membership Packages - Web Hosting!

One Month Free Trial! ProStores - an eBay Company
Gain customers, increase sales, and boost profits with your own Web Store.

→ Get Google Pay-Per-Click Ads Free!
→ Automated Cash Formula $$$

Javascript - Document Object Model Manipulation

Javascript - Document Object Model Manipulation

Comments

Webmaster Corner

Categories