Fonctions annexes

innerHTML

Historiquement, Internet Explorer n’implémentait pas complètement le modèle DOM, donc pour palier à ce problème les développeurs utilisaient cette méthode pour pouvoir modifier l’ensemble de l’arborescence d’une node. Aujourd’hui cette méthode est reconnu aussi bien par IE que Mozilla cependant il existe toujours des différences en terme de performance. De plus il est a noter que l’usage de cette fonction allège considérablement le code. Mais en contrepartie il ne permet pas de façon élégante de brancher des événements au composant Javascript.

Exemple : Soit un document web comportant un tag DIV avec l’attribut id égale à ‘container’, essayons de placé à l’intérieur un autre DIV possédant le texte ‘hello world’ ? 
// recherche de l’élément div container
var ocontainer=document.getElementById(‘container’); 

//utilisation de innerHTML pour insérer le nouveaux div et son texte
ocontainer.innerHTML= "<div> hello world</div>"

Fonctions spécifiques aux tableaux

L’objet Table et ses nodes filles possèdent des fonction capable de modifier leur contenu.
  • table
    • rows : liste des objets tr contenue dans la table.
    • insertRow(indice) : ajoute un nouveau tr à l’indice spécifié. Retourne le tr nouvellement créé.
    • deleteRow(indice) : supprime le tr à l’indice spécifié.
  • tr
    • cells : liste des objets td contenue dans le tr.
    • rowIndex :numéro d’index de la ligne dans la table.
    • insertCell(indice) : ajoute un nouveau td à l’indice spécifié. Retourne le td nouvellement créé.
    • deleteCell(indice) : supprime le td à l’indice spécifié.
  • td
    • cellIndex : numéro d’index de la cellule dans la ligne.
exemple : La table est déjà crée avec id égale à ‘matable’, on crée une table de 10*10 . L’intérieur des cellules porte le numéro d’indice de création 
var tb = document.getElementById('matable') ;
var ind=0;
for (var i =0 ; i<10 ;i++) {
	var line =tb.insertRow(i);
	for (var j=0 ;j<10;j++ ) {
		cell= line.insertCell(j);
		cell.innerHTML=ind;
		ind++;
	}
}