Mini-TP : recréer une structure DOM

Afin de s’entraîner à jouer avec le DOM, voici quatre petits exercices. Pour chacun d'eux, une structure DOM sous forme de code HTML vous est donnée, et il vous est demandé de recréer cette structure en utilisant le DOM.

Notez que la correction donnée est une solution possible, et qu'il en existe d'autres. Chaque codeur a un style de code, une façon de réfléchir, d'organiser et de présenter son code, surtout ici, où les possibilités sont nombreuses.

Premier exercice

Énoncé

Pour ce premier exercice, nous vous proposons de recréer « du texte » mélangé à divers éléments tels des<a> et des <strong>. C'est assez simple, mais pensez bien à ne pas vous emmêler les pinceaux avec tous les nœuds textuels !

Le <strong>World Wide Web Consortium</strong>, abrégé par le sigle <strong>W3C</strong>, est un

<a href="http://fr.wikipedia.org/wiki/Organisme_de_normalisation" title="Organisme de normalisation">organisme de standardisation</a>

à but non-lucratif chargé de promouvoir la compatibilité des technologies du <a href="http://fr.wikipedia.org/wiki/World_Wide_Web" title="World Wide Web">World Wide Web</a>.

</div>

Corrigé

// On crée l'élément conteneur

var mainDiv = document.createElement('div');

mainDiv.id = 'divTP1';

// On crée tous les nœuds textuels, pour plus de facilité

var textNodes = [

document.createTextNode('Le '),

document.createTextNode('World Wide Web Consortium'),

document.createTextNode(', abrégé par le sigle '),

document.createTextNode('W3C'),

document.createTextNode(', est un '),

document.createTextNode('organisme de standardisation'),

document.createTextNode(' à but non-lucratif chargé de promouvoir la compatibilité des technologies du '),

document.createTextNode('World Wide Web'),

document.createTextNode('.')

];

// On crée les deux <strong> et les deux <a>

var w3cStrong1 = document.createElement('strong');

var w3cStrong2 = document.createElement('strong');

w3cStrong1.appendChild(textNodes[1]);

w3cStrong2.appendChild(textNodes[3]);

var orgLink = document.createElement('a');

var wwwLink = document.createElement('a');

orgLink.href = 'http://fr.wikipedia.org/wiki/Organisme_de_normalisation';

orgLink.title = 'Organisme de normalisation';

orgLink.appendChild(textNodes[5]);

wwwLink.href = 'http://fr.wikipedia.org/wiki/World_Wide_Web';

wwwLink.title = 'World Wide Web';

wwwLink.appendChild(textNodes[7]);

// On insère le tout dans mainDiv

mainDiv.appendChild(textNodes[0]);

mainDiv.appendChild(w3cStrong1);

mainDiv.appendChild(textNodes[2]);

mainDiv.appendChild(w3cStrong2);

mainDiv.appendChild(textNodes[4]);

mainDiv.appendChild(orgLink);

mainDiv.appendChild(textNodes[6]);

mainDiv.appendChild(wwwLink);

mainDiv.appendChild(textNodes[8]);

// On insère mainDiv dans le <body>

document.body.appendChild(mainDiv);

Par mesure de facilité, tous les nœuds textuels sont contenus dans le tableau textNodes, ça évite de faire 250 variables différentes. Une fois les nœuds textuels créés, on crée les éléments <a> et <strong>. Une fois que tout cela est fait, on insère le tout, un élément après l'autre, dans le div conteneur.

Deuxième exercice

Énoncé

<p>Langages basés sur ECMAScript :</p>

<ul>

<li>JavaScript</li>

<li>JScript</li>

<li>ActionScript</li>

</ul>

</div>

On ne va tout de même pas créer quatre éléments <li> « à la main »… Utilisez une boucle for ! Et souvenez-vous, utilisez un tableau pour définir les éléments textuels.

Corrigé

// On crée l'élément conteneur

var mainDiv = document.createElement('div');

mainDiv.id = 'divTP2';

// On crée tous les nœuds textuels, pour plus de facilité

var languages = [

document.createTextNode('JavaScript'),

document.createTextNode('JScript'),

document.createTextNode('ActionScript'),

document.createTextNode('EX4')

];

// On crée le paragraphe

var paragraph = document.createElement('p');

var paragraphText = document.createTextNode('Langages basés sur ECMAScript :');

paragraph.appendChild(paragraphText);

// On crée la liste, et on boucle pour ajouter chaque item

var uList = document.createElement('ul'),

uItem;

for (var i = 0, c=languages.length; i < c; i++) {

uItem = document.createElement('li');

uItem.appendChild(languages[i]);

uList.appendChild(uItem);

}

// On insère le tout dans mainDiv

mainDiv.appendChild(paragraph);

mainDiv.appendChild(uList);

// On insère mainDiv dans le <body>

document.body.appendChild(mainDiv);

Les nœuds textuels de la liste à puces sont créés par le biais du tableau languages, et pour créer chaque élément <li>, il suffit de boucler sur le nombre d'items du tableau.

Troisième exercice

Énoncé

Voici une version légèrement plus complexe de l'exercice précédent. Le schéma de fonctionnement est le même, mais ici le tableau languages contiendra des objets littéraux, et chacun de ces objets contiendra deux propriétés : le nœud du <dt> et le noeud du <dd>.

<p>Langages basés sur ECMAScript :</p>

<dl>

<dt>JavaScript</dt>

<dd>JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi coté serveur.</dd>

<dt>JScript</dt>

<dd>JScript est le nom générique de plusieurs implémentations d'ECMAScript 3 créées par Microsoft.</dd>

<dt>ActionScript</dt>

<dd>ActionScript est le langage de programmation utilisé au sein d'applications clientes (Adobe Flash, Adobe Flex) et serveur (Flash media server, JRun, Macromedia Generator).</dd>

<dd>ECMAScript for XML (E4X) est une extension XML au langage ECMAScript.</dd>

</dl>

</div>

Corrigé

// On crée l'élément conteneur

var mainDiv = document.createElement('div');

mainDiv.id = 'divTP3';

// On place le texte dans des objets, eux-mêmes placés dans un tableau

// Par facilité, la création des nœuds textuels se fera dans la boucle

var languages = [

{ t: 'JavaScript',

d: 'JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives mais aussi coté serveur.' },

{ t: 'JScript',

d: 'JScript est le nom générique de plusieurs implémentations d\'ECMAScript 3 créées par Microsoft.' },

{ t: 'ActionScript',

d: 'ActionScript est le langage de programmation utilisé au sein d\'applications clientes (Adobe Flash, Adobe Flex) et serveur (Flash media server, JRun, Macromedia Generator).' },

{ t: 'EX4',

d: 'ECMAScript for XML (E4X) est une extension XML au langage ECMAScript.' }

];

// On crée le paragraphe

var paragraph = document.createElement('p');

var paragraphText = document.createTextNode('Langages basés sur ECMAScript :');

paragraph.appendChild(paragraphText);

// On crée la liste, et on boucle pour ajouter chaque item

var defList = document.createElement('dl'),

defTerm, defTermText,

defDefn, defDefnText;

for (var i = 0, c=languages.length; i < c; i++) {

defTerm = document.createElement('dt');

defDefn = document.createElement('dd');

defTermText = document.createTextNode(languages[i].t);

defDefnText = document.createTextNode(languages[i].d);

defTerm.appendChild(defTermText);

defDefn.appendChild(defDefnText);

defList.appendChild(defTerm);

defList.appendChild(defDefn);

}

// On insère le tout dans mainDiv

mainDiv.appendChild(paragraph);

mainDiv.appendChild(defList);

// On insère mainDiv dans le <body>

document.body.appendChild(mainDiv);

Le tableau contient des objets comme ceci :

{

t: 'Terme',

d: 'Définition'}

Créer une liste de définitions (<dl>) n'est pas plus compliqué qu'une liste à puces normale, la seule chose qui diffère est que <dt> et <dd> sont ajoutés conjointement au sein de la boucle.

Quatrième exercice

Énoncé

Un rien plus corsé… quoique. Ici, la difficulté réside dans le nombre important d'éléments à imbriquer les uns dans les autres. Si vous procédez méthodiquement, vous avez peu de chance de vous planter.

<legend>Uploader une image</legend>

<label for="inputUpload">Image à uploader :</label>

</div>

</fieldset>

</form>

</div>

Corrigé

// On crée l'élément conteneur

var mainDiv = document.createElement('div');

mainDiv.id = 'divTP4';

// Création de la structure du formulaire

var form = document.createElement('form');

var fieldset = document.createElement('fieldset');

var legend = document.createElement('legend'),

legendText = document.createTextNode('Uploader une image');

var center = document.createElement('div');

form.action = 'upload.php';

form.enctype = 'multipart/form-data';

form.method = 'post';

center.setAttribute('style', 'text-align: center');

legend.appendChild(legendText);

fieldset.appendChild(legend);

fieldset.appendChild(center);

form.appendChild(fieldset);

// Création des champs

var label = document.createElement('label'),

labelText = document.createTextNode('Image à uploader :');

var input = document.createElement('input');

var br = document.createElement('br');

var submit = document.createElement('input');

input.type = 'file';

input.id = 'inputUpload';

input.name = input.id;

submit.type = 'submit';

submit.value = 'Envoyer';

label.htmlFor = 'inputUpload';

label.appendChild(labelText);

center.appendChild(label);

center.appendChild(input);

center.appendChild(br);

center.appendChild(br.cloneNode(false)); // On clone, pour mettre un deuxième <br />

center.appendChild(submit);

// On insère le formulaire dans mainDiv

mainDiv.appendChild(form);

// On insère mainDiv dans le <body>

document.body.appendChild(mainDiv);

Comme il y a beaucoup d'éléments à créer, pourquoi ne pas diviser le script en deux : la structure du formulaire, et les champs. C'est plus propre, et on s'y retrouve mieux.

Conclusion des TP

Il est très probable que vous n'ayez pas organisé votre code comme dans les corrections, ou que vous n'ayez pas utilisé les mêmes idées, comme utiliser un tableau, ou même un tableau d'objets. Votre code est certainement bon, mais retenez une chose : essayez d'avoir un code clair et propre, tout en étant facile à comprendre, cela vous simplifiera la tâche !

En résumé

Une fois qu'on a accédé à un élément, on peut naviguer vers d'autres éléments avec parentNode, previousSibling et nextSibling, ainsi que récupérer des informations sur le nom des éléments et leur contenu.
Pour ajouter un élément, il faut d'abord le créer, puis lui adjoindre des attributs et enfin l'insérer à l'endroit voulu au sein du document.
Outre le « passage par valeur », le Javascript possède un « passage par référence » qui est fréquent lorsqu'on manipule le DOM. C'est cette histoire de référence qui nous oblige à utiliser une méthode telle que cloneNode() pour dupliquer un élément. En effet, copier la variable qui pointe vers cet élément ne sert à rien.
Si appendChild() est particulièrement pratique, insertBefore() l'est tout autant pour insérer un élément avant un autre. Créer une fonction insertAfter() est assez simple et peut faire gagner du temps.

Créé avec HelpNDoc Personal Edition: Sites web iPhone faciles