Javascript - DOM - Document Object Model

Faites un copier coller du code ci-dessous et lancez le dans votre navigateur (tested on IE & Mozilla).
Si vous souhaitez voir le résultat en démo (selon nous une bonne méthode d'apprentissage) cliquez ici (nouvelle fenêtre).

<?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/

Commentaires

Postez le premier commentaire maintenant
ou venez en discuter à cette adresse:
Forum - Javascript

Coin du Webmaster

Vous disposez d'un site à forte audience?

Obtenez votre Kit Graphique pour vos sites!

Engagez des Freelance Pro.

Javascript - DOM - Document Object Model

Javascript - DOM - Document Object Model

Commentaires

Coin du Webmaster

Catégories