Document Object Model (DOM)

DOM est un schéma pour langages de programmation qui permet d'accéder à des éléments de HTML.
Voyons ce que l'on peut faire avec javascript et DOM.





Création de balises :
var monbr = document.createElement("br");
document.createElement("input");
document.createElement("td");
document.createElement("tr");
...

Définition du style :
avec Internet Explorer, la méthode setAttribute ne fonctionne pas toujours,
c'est pourquoi il faut alors accéder directement aux propriétés des éléments (elem.name="infos"; ou encore td.colSpan ="2";).

var elem = document.createElement("textarea");
elem.setAttribute("cols", "30");
elem.setAttribute("rows", "15");
elem.setAttribute("name", "infos");
elem.setAttribute("value", explications);
elem.setAttribute("disabled", "disabled");

Ajout de texte :
mon_element.appendChild(document.createTextNode("texte que vous voulez"));
Avec innerHTML, on peut écrire directement "dans des balises" : document.getElementById("mondiv").innerHTML = "autre texte";

Ajout de la balise à un élément existant : document.getElementById("mondiv").appendChild(moninput);
var input = document.createElement('<INPUT id="monid" TYPE="checkbox" NAME="checkmef" onclick="return verifierCasesCochees(this)">');

Ajout d'actions sur un bouton créé dynamiquement :
elem.onkeyup = function(){appeldemafonction(); }
elem.onclick = function(){appeldemafonction(); }

Ajout et suppression dynamique de lignes dans un tableau

Pour ajouter dynamiquement des lignes dans un tableau avec DOM, il faut préparer la «boîte» dans laquelle on ajoutera des lignes (TR). Le piège est de placer une simple Table; il ne faut pas oublier la balise tbody entre les table et les futurs tr.

<table>
	<tbody id="idtablecalcul">
	</tbody>
</table>
<input type="button" onclick="ajoutLigne()" value="ajouter une ligne">
<script>
function ajoutLigne()
{
  //on doit ajouter une ligne TR
  var tr = document.createElement("tr");

  var td1 = document.createElement("td");
  var td2 = document.createElement("td");

  td1.appendChild(document.createTextNode(" td1 "));
  td2.appendChild(document.createTextNode(" td2 "));

  tr.appendChild(td1);
  tr.appendChild(td2);

  //ajout de la ligne
  document.getElementById("idtabletestajoutligne").appendChild(tr);
}
function enleverLignesSaufPremiere()
{
  var Node = document.getElementById("idtabletestajoutligne");
  var NodeListe = Node.getElementsByTagName("tr"); 		//les TR de la table

  while(NodeListe.length>0)
  {
  	Node.removeChild(NodeListe.item(0));
  }
  }
</script>

Ecrire dynamiquement du texte formaté, coloré

<div id="divtestajoutTexteColor"></div>
<input type="button" onclick="ajoutTexteColor()" value="Ajout texte">
<script>
function ajoutTexteColor()
{
	var rouge = document.createElement("font");
	rouge.setAttribute("color","#FF0000");
	rouge.innerHTML = "<b>mon texte</b>";
	document.getElementById("divtestajoutTexteColor").appendChild(rouge);
}
</script>

Enlever tous les éléments d'un objet

var node = document.getElementById("element"); //l'élément qu'on veut vider
while (node.hasChildNodes())
{
	node.removeChild(node.childNodes[0]);
}