Génération automatique de scripts DOM

 Article modifié dernièrement le 15 Déc 2009 @ 12 h 53 min

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]

Trois flèches vers le bas

1- Logiciel de brouillage d’adresse IP :

Contourner la censure en surfant anonyme

2- L’article explicatif :

La différence entre un proxy et un VPN

3- Comment espionner un smartphone (app) :

L’application de référence

Commentez ici

Article suivant:

Article précédent:

Share This