Mini-TP n°1 : recréer une structure DOM

Cet exercice s'inscrit dans le cadre des Mini-TP présentés dans le tutoriel. Afin de s'entraîner à créer avec le DOM, voici quatre petits TP, dont ceci est le premier. 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 en Javascript.

Utilisez le <div id="output"> pour insérer votre structure DOM. Pour ce premier Mini-TP, le code que vous devez recréer est donné ci-dessous.

<div id="divTP1">
    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>

Écrivez le code qui permet de faire ça. Dès que c'est fait, cliquez sur le bouton Exécuter le script pour exécuter le code.

Écrivez votre code
Console d'erreurs

Pas d'erreurs d'exécution ou de syntaxe

Rendu #output
Source HTML

Solutions

Arbre DOM

La manière longue et propre

C'est le corrigé de base, avec la belle technique comme elle doit être !

// 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 #output
document.getElementById('output').appendChild(mainDiv);

Pour faire plus court, on aurait pu se passer de définir les noeuds textuels et les définir directement à l'insertion :

// On crée l'élément conteneur
var mainDiv = document.createElement('div');
    mainDiv.id = 'divTP1';

// On crée les deux <strong> et les deux <a>
var w3cStrong1 = document.createElement('strong');
var w3cStrong2 = document.createElement('strong');

w3cStrong1.appendChild(document.createTextNode('World Wide Web Consortium'));
w3cStrong2.appendChild(document.createTextNode('W3C'));

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(document.createTextNode('organisme de standardisation'));

wwwLink.href  = 'http://fr.wikipedia.org/wiki/World_Wide_Web';
wwwLink.title = 'World Wide Web';
wwwLink.appendChild(document.createTextNode('World Wide Web'));

// On insère le tout dans mainDiv
mainDiv.appendChild(document.createTextNode('Le '));
mainDiv.appendChild(w3cStrong1);
mainDiv.appendChild(document.createTextNode(', abrégé par le sigle '));
mainDiv.appendChild(w3cStrong2);
mainDiv.appendChild(document.createTextNode(', est un '));
mainDiv.appendChild(orgLink);
mainDiv.appendChild(document.createTextNode(' à but non-lucratif chargé de promouvoir la compatibilité des technologies du '));
mainDiv.appendChild(wwwLink);
mainDiv.appendChild(document.createTextNode('.'));

// On insère mainDiv dans le #output
document.getElementById('output').appendChild(mainDiv);

PLus court mains moins 'pro' avec innerHTML

Il y a moyen de rendre tout ça moins verbeux en utilisant innerHTML (ou textContent, c'est selon) pour définir les noeuds textuels :

// On crée l'élément conteneur
var mainDiv = document.createElement('div');
    mainDiv.id = 'divTP1';

// On crée les deux <strong> et les deux <a>
var w3cStrong1 = document.createElement('strong');
var w3cStrong2 = document.createElement('strong');
    w3cStrong1.innerHTML = 'World Wide Web Consortium';
    w3cStrong2.innerHTML = 'W3C';

var orgLink = document.createElement('a');
    orgLink.href  = 'http://fr.wikipedia.org/wiki/Organisme_de_normalisation';
    orgLink.title = 'Organisme de normalisation';
    orgLink.innerHTML = 'organisme de standardisation';

var wwwLink = document.createElement('a');
    wwwLink.href  = 'http://fr.wikipedia.org/wiki/World_Wide_Web';
    wwwLink.title = 'World Wide Web';
    wwwLink.innerHTML = 'World Wide Web';

// On insère le tout dans mainDiv
mainDiv.innerHTML = 'Le ';
mainDiv.appendChild(w3cStrong1);
mainDiv.innerHTML += ', abrégé par le sigle ';
mainDiv.appendChild(w3cStrong2);
mainDiv.innerHTML += ', est un ';
mainDiv.appendChild(orgLink);
mainDiv.innerHTML += ' à but non-lucratif chargé de promouvoir la compatibilité des technologies du ';
mainDiv.appendChild(wwwLink);
mainDiv.innerHTML += '.';

// On insère mainDiv dans le #output
document.getElementById('output').appendChild(mainDiv);

Mini-TP n°1 : recréer une structure DOM

Solutions

La manière longue et propre

PLus court mains moins 'pro' avec innerHTML

Un commentaire ? Un bug ? Contactez-moi !

OpenClassrooms

Twitter

Zeste de Savoir