DOM ?
Le Modèle Objet de Document (DOM) est une Interface de Programmation d’Application (API) qui définit la structure logique d’un document HTML ou XML et la manière d’y accéder et de le manipuler.
Cela permet donc à des programmes informatiques et à des scripts d’accéder ou de mettre à jour le contenu, la structure ou le style des documents. Quasiment tout ce qui se trouve dans un document HTML ou XML peut être manipuler (modifier, supprimer ou ajouter) en utilisant DOM.
Comment ?
Il est quasiment impossible d’écrire des applications web en Ajax sans avoir à écrire une ligne de code de JavaScript en utilisant DOM. Un exemple simple est l’ajout d’une ligne dans un tableau afin d’y afficher des informations complémentaires sur le clic d’un bouton, l’image du bouton devant changer dans la foulée afin de montrer à l’utilisateur qu’il peut cliquer à nouveau dessus pour masquer cette nouvelle ligne :
[javascript]
// méthode appelée pour afficher le détails des paramètres de déclenchement
// crée une nouvelle ligne sous le déclenchement
function displayDetail(idDeclenchement, idTraitement) {
// met à jour l’image et la fonction javascript
$("DETAIL_" + idDeclenchement).getElementsByTagName("img")[0].src = "${ctx}/images/suivi/masquerDetail.png";
$("DETAIL_" + idDeclenchement).getElementsByTagName("img")[0].onclick = function() { hideDetail(idDeclenchement, idTraitement); };
// ajoute une nouvelle ligne sous le déclenchement
currentRow = document.getElementById(idDeclenchement);
newIndex = currentRow.rowIndex + 1;
newRow = document.getElementById("tableSuivi").insertRow(newIndex);
newRow.id = "PARAMETRES_" + idDeclenchement;
newRow.className = currentRow.className;
newCell = newRow.insertCell(-1);
newCell.colSpan = "12";
newCell.innerHTML = "<div id = ‘PARAMETRES_DECLENCHEMENT_" + idDeclenchement + "’></div>";
// récupère et construit le tableau des paramètres du déclenchement
retrieveParameters(idDeclenchement, idTraitement);
}
// méthode appelée pour masquer le détail des paramètres du déclenchement
// supprime la ligne crée sous le déclenchement
function hideDetail(idDeclenchement, idTraitement) {
// met à jour l’image et la fonction javascript
$("DETAIL_" + idDeclenchement).getElementsByTagName("img")[0].src = "${ctx}/images/suivi/afficherDetail.png";
$("DETAIL_" + idDeclenchement).getElementsByTagName("img")[0].onclick = function() { displayDetail(idDeclenchement, idTraitement); };
// récupère et supprime la ligne
rowToDelete = $("PARAMETRES_" + idDeclenchement);
indexToDelete = rowToDelete.rowIndex;
document.getElementById("tableSuivi").deleteRow(indexToDelete);
}
[/javascript]
Et voilà le code HTML que cela va générer dans le document sur l’appel de la fonction « displayDetail() » et l’appel à « hideDetail() » supprimera ce bout de code ce qui masquera le détail :
[javascript]
<table>
…
<tr id="PARAMETRES_10" class="className" colspan="12">
<div id="PARAMETRES_DECLENCHEMENT_10"> … </div>
</tr>
…
</table>
[/javascript]
Outil
Même si DOM est plus facile à s’approprier que JavaScript, il n’est pas simple de le maîtriser totalement, c’est pourquoi je vous propose un service en ligne gratuit qui permet à partir d’un code source HTML d’obtenir l’équivalent DOM dans un script JavaScript. Ce service est très simple d’utilisation et permettra de réaliser un gain de temps non-négligeable aux développeurs de sites web Ajax qui génèrent dynamiquement le contenu des pages en JavaScript.
Ce site est HTML2DOM qui se trouve à l’adresse suivante : http://www.html2dom.com/et voici le script qu’il utilise afin d’effectuer cette conversion : http://www.html2dom.com/html2dom.js
Code généré
Voici l’équivalent DOM que cet outil génère pour le code HTML généré de mon exemple précédent :
[javascript]
<tr id="PARAMETRES_10" class="className" colspan="12">
<div id="PARAMETRES_DECLENCHEMENT_10"> … </div>
</tr>
[/javascript]
Voici le résultat :
[javascript]
var html2dom_root = document.createElement(‘div’);
html2dom_root_1_tr = document.createElement("tr");
html2dom_root_1_tr.setAttribute("id", "PARAMETRES_10");
html2dom_root_1_tr.setAttribute("class", "className");
html2dom_root_1_tr.setAttribute("colspan", "12");
html2dom_root_1_tr_1_text = document.createTextNode("\n ");
html2dom_root_1_tr.appendChild(html2dom_root_1_tr_1_text);
html2dom_root_1_tr_2_div = document.createElement("div");
html2dom_root_1_tr_2_div.setAttribute("id", "PARAMETRES_DECLENCHEMENT_10");
html2dom_root_1_tr_2_div_1_text = document.createTextNode(" … ");
html2dom_root_1_tr_2_div.appendChild(html2dom_root_1_tr_2_div_1_text);
html2dom_root_1_tr.appendChild(html2dom_root_1_tr_2_div);
html2dom_root_1_tr_3_text = document.createTextNode("\n");
html2dom_root_1_tr.appendChild(html2dom_root_1_tr_3_text);
html2dom_root.appendChild(html2dom_root_1_tr);
[/javascript]
D'autres articles vous intéresseront :
Cet article a été écrit par :
Mimie – qui a déjà rédigé 130 posts sur Des Geeks et des lettres.
Passionné d'informatique et développeur JavaEE de métier, je me consacre principalement à écrire des billets sur les sujets du Web et de la programmation Web. Ce blog est un espace qui me permet de partager mes découvertes avec vous et me sert accessoirement de pense bête !
Affichez votre portrait