Vous allez rapidement constater qu'il est plutôt aisé de manipuler le contenu d'une page web et que cela va vous devenir indispensable par la suite.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Le Document Object Model
Naviguer dans le document
Éditer les éléments HTML
innerText et textContent
Q.C.M.
Chapitre précédent Sommaire Chapitre suivant
Retour en haut
Le Document Object Model
Le Document Object Model (abrégé DOM) est une interface de programmation pour les documents XML et HTML.
Une interface de programmation, qu'on appelle aussi une API (pour Application Programming Interface), est un ensemble d'outils qui permettent de faire communiquer entre eux plusieurs programmes ou, dans le cas présent, différents langages. Le terme API reviendra souvent, quel que soit le langage de programmation que vous apprendrez.
Le DOM est donc une API qui s'utilise avec les documents XML et HTML, et qui va nous permettre, via le Javascript, d'accéder au code XML et/ou HTML d'un document. C'est grâce au DOM que nous allons pouvoir modifier des éléments HTML (afficher ou masquer un <div> par exemple), en ajouter, en déplacer ou même en supprimer.
Petite note de vocabulaire : dans un cours sur le HTML, on parlera de balises HTML (une paire de balises en réalité : une balise ouvrante et une balise fermante). Ici, en Javascript, on parlera d'élément HTML, pour la simple raison que chaque paire de balises (ouvrante et fermante) est vue comme un objet. Par commodité, et pour ne pas confondre, on parle donc d'élément HTML.
Petit historique
À l'origine, quand le Javascript a été intégré dans les premiers navigateurs (Internet Explorer et Netscape Navigator), le DOM n'était pas unifié, c'est-à-dire que les deux navigateurs possédaient un DOM différent. Et donc, pour accéder à un élément HTML, la manière de faire différait d'un navigateur à l'autre, ce qui obligeait les développeurs Web à coder différemment en fonction du navigateur. En bref, c'était un peu la jungle.
Le W3C a mis de l'ordre dans tout ça, et a publié une nouvelle spécification que nous appellerons « DOM-1 » (pour DOM Level 1). Cette nouvelle spécification définit clairement ce qu'est le DOM, et surtout comment un document HTML ou XML est schématisé. Depuis lors, un document HTML ou XML est représenté sous la forme d'un arbre, ou plutôt hiérarchiquement. Ainsi, l'élément <html> contient deux éléments enfants : <head> et <body>, qui à leur tour contiennent d'autres éléments enfants.
Ensuite, la spécification DOM-2 a été publiée. La grande nouveauté de cette version 2 est l'introduction de la méthode getElementById() qui permet de récupérer un élément HTML ou XML en connaissant son ID.
L'objet window
Avant de véritablement parler du document, c'est-à-dire de la page Web, nous allons parler de l'objet window. L'objet window est ce qu'on appelle un objet global qui représente la fenêtre du navigateur. C'est à partir de cet objet que le Javascript est exécuté.
Si nous reprenons notre « Hello World! » du début, nous avons :
Code : HTML - Sélectionner
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<script>
alert('Hello world!');
</script>
</body>
</html>
Contrairement à ce qui a été dit dans ce cours, alert() n'est pas vraiment une fonction. Il s'agit en réalité d'une méthode appartenant à l'objet window. Mais l'objet window est dit implicite, c'est-à-dire qu'il n'y a généralement pas besoin de le spécifier. Ainsi, ces deux instructions produisent le même effet, à savoir ouvrir une boîte de dialogue :
Code : JavaScript - Sélectionner
1
2
window.alert('Hello world!');
alert('Hello world!');
Puisqu'il n'est pas nécessaire de spécifier l'objet window, on ne le fait généralement pas sauf si cela est nécessaire, par exemple si on manipule des frames (nous verrons plus loin de quoi il s'agit).
Ne faites pas de généralisation hâtive : si alert() est une méthode de l'objet window, toutes les fonctions ne font pas nécessairement partie de l'objet window. Ainsi, les fonctions comme isNaN(), parseInt() ou encore parseFloat() ne dépendent pas d'un objet. Ce sont des fonctions globales. Ces dernières sont, cependant, extrêmement rares. Les quelques fonctions citées dans ce paragraphe représentent près de la moitié des fonctions dites « globales », ce qui prouve clairement qu'elles ne sont pas bien nombreuses.
De même, lorsque vous déclarez une variable dans le contexte global de votre script, cette variable deviendra en vérité une propriété de l'objet window. Afin de vous démontrer facilement la chose, regardez donc ceci :
Code : JavaScript - Sélectionner
1
2
3
4
5
6
7
8
9
10
11
var text = 'Variable globale !';
(function() { // On utilise une IEF pour « isoler » du code
var text = 'Variable locale !';
alert(text); // Forcément, la variable locale prend le dessus
alert(window.text); // Mais il est toujours possible d'accéder à la variable globale grâce à l'objet « window »
})();
Si vous tentez d'exécuter cet exemple via le site jsfiddle.net vous risquez alors d'obtenir un résultat erroné. Il peut arriver que ce genre de site ne permette pas l'exécution de tous les types de codes, en particulier lorsque vous touchez à window.
Une dernière chose importante qu'il vous faut mémoriser : toute variable non déclarée (donc utilisée sans jamais écrire le mot-clé var) deviendra immédiatement une propriété de l'objet window, et ce, quel que soit l'endroit où vous utilisez cette variable ! Prenons un exemple simple :
Code : JavaScript - Sélectionner
1
2
3
4
5
6
7
(function() { // On utilise une IEF pour « isoler » du code
text = 'Variable accessible !'; // Cette variable n'a jamais été déclarée et pourtant on lui attribue une valeur
})();
alert(text); // Affiche : « Variable accessible ! »
Notre variable a été utilisée pour la première fois dans une IEF et pourtant nous y avons accès depuis l'espace global ! Alors pourquoi cela fonctionne-t-il de cette manière ? Tout simplement parce que le Javascript va chercher à résoudre le problème que nous lui avons donné : on lui demande d'attribuer une valeur à la variable text, il va donc chercher cette variable mais ne la trouve pas, la seule solution pour résoudre le problème qui lui est donné est alors d'utiliser l'objet window. Ce qui veut dire qu'en écrivant :
Code : JavaScript - Sélectionner
1
text = 'Variable accessible !';
le code sera alors interprété de cette manière si aucune variable accessible n'existe avec ce nom :
Code : JavaScript - Sélectionner
1
window.text = 'Variable accessible !';
Si nous vous montrons cette particularité du Javascript c'est pour vous conseiller de ne pas vous en servir ! Si vous n'utilisez jamais le mot-clé var alors vous allez très vite arriver à de grandes confusions dans votre code (et à de nombreux bugs). Si vous souhaitez déclarer une variable dans l'espace global alors que vous vous trouvez actuellement dans un autre espace (une IEF, par exemple), spécifiez donc explicitement l'objet window. Le reste du temps, pensez bien à écrire le mot-clé var.
Le document
L'objet document est un sous-objet de window, l'un des plus utilisés. Et pour cause, il représente la page Web et plus précisément la balise <html>. C'est grâce à cet élément-là que nous allons pouvoir accéder aux éléments HTML et les modifier. Voyons donc, dans la sous-partie suivante, comment naviguer dans le document.
Retour en haut
Naviguer dans le document
La structure DOM
Comme il a été dit précédemment, le DOM pose comme concept que la page Web est vue comme un arbre, comme une hiérarchie d'éléments. On peut donc schématiser une page Web simple comme ceci :
Une page Web peut être vue comme un arbre
Voici le code source de la page :
Code : HTML - Sélectionner
1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Le titre de la page</title>
</head>
<body>
<div>
<p>Un peu de texte <a>et un lien</a></p>
</div>
</body>
</html>
Le schéma est plutôt simple : l'élément <html> contient deux éléments, appelés enfants : <head> et <body>. Pour ces deux enfants, <html> est l'élément parent. Chaque élément est appelé nœud (node en anglais). L'élément <head> contient lui aussi deux enfants : <meta> et <title>. <meta> ne contient pas d'enfant tandis que <title> en contient un, qui s’appelle #text. Comme son nom l'indique, #text est un élément qui contient du texte.
Il est important de bien saisir cette notion : le texte présent dans une page Web est vu par le DOM comme un nœud de type #text. Dans le schéma précédent, l'exemple du paragraphe qui contient du texte et un lien illustre bien cela :
Code : HTML - Sélectionner
1
2
3
4
<p>
Un peu de texte
<a>et un lien</a>
</p>
Si on va à la ligne après chaque nœud, on remarque clairement que l'élément <p> contient deux enfants : #text qui contient « Un peu de texte » et <a>, qui lui-même contient un enfant #text représentant « et un lien ».
Accéder aux éléments
L'accès aux éléments HTML via le DOM est assez simple mais demeure actuellement plutôt limité. L'objet document possède trois méthodes principales : getElementById(), getElementsByTagName() et getElementsByName().
getElementById()
Cette méthode permet d'accéder à un élément en connaissant son ID qui est simplement l'attribut id de l'élément. Cela fonctionne de cette manière :
Code : HTML - Sélectionner
1
2
3
4
5
6
7
8
9
<div id="myDiv">
<p>Un peu de texte <a>et un lien</a></p>
</div>
<script>
var div = document.getElementById('myDiv');
alert(div);
</script>
Essayer !
En exécutant ce code, le navigateur affiche ceci :
Notre div est bien un objet de type HTMLDivElement
Il nous dit que div est un objet de type HTMLDivElement. En clair, c'est un élément HTML qui se trouve être un <div>, ce qui nous montre que le script fonctionne correctement.
getElementsByTagName()
Faites très attention dans le nom de cette méthode : il y a un « s » à Elements. C'est une source fréquente d'erreurs.
Cette méthode permet de récupérer, sous la forme d'un tableau, tous les éléments de la famille. Si, dans une page, on veut récupérer tous les <div>, il suffit de faire comme ceci :
Code : JavaScript - Sélectionner
1
2
3
4
5
var divs = document.getElementsByTagName('div');
for (var i = 0, c = divs.length ; i < c ; i++) {
alert('Element n° ' + (i + 1) + ' : ' + divs[i]);
}
Essayer !
La méthode retourne une collection d'éléments (utilisable de la même manière qu'un tableau). Pour accéder à chaque élément, il est nécessaire de parcourir le tableau avec une petite boucle.
Deux petites astuces :
Cette méthode est accessible sur n'importe quel élément HTML et pas seulement sur l'objet document.
En paramètre de cette méthode vous pouvez mettre une chaîne de caractères contenant un astérisque * qui récupérera tous les éléments HTML contenus dans l'élément ciblé.
getElementsByName()
Cette méthode est semblable à getElementsByTagName() et permet de ne récupérer que les éléments qui possèdent un attribut name que vous spécifiez. L'attribut name n'est utilisé qu'au sein des formulaires, et est déprécié depuis la spécification HTML5 dans tout autre élément que celui d'un formulaire. Par exemple, vous pouvez vous en servir pour un élément <input> mais pas pour un élément <map>.
Sachez aussi que cette méthode est dépréciée en XHTML mais est maintenant standardisée pour l'HTML5.
Accéder aux éléments grâce aux technologies récentes
Ces dernières années, le Javascript a beaucoup évolué pour faciliter le développement Web. Les deux méthodes que nous allons étudier sont récentes et ne sont pas supportées par les vieilles versions des navigateurs, attendez-vous donc à ne pas pouvoir vous en servir aussi souvent que vous le souhaiteriez malgré leur côté pratique. Vous pouvez consulter le tableau des compatibilités sur le MDN.
Ces deux méthodes sont querySelector() et querySelectorAll() et ont pour particularité de grandement simplifier la sélection d'éléments dans l'arbre DOM grâce à leur mode de fonctionnement. Ces deux méthodes prennent pour paramètre un seul argument : une chaîne de caractères !
Cette chaîne de caractères doit être un sélecteur CSS comme ceux que vous utilisez dans vos feuilles de style. Exemple :
Code : CSS - Sélectionner
1
- menu .item span
Ce sélecteur CSS stipule que l'on souhaite sélectionner les balises de type <span> contenues dans les classes .item elles-mêmes contenues dans un élément dont l'identifiant est #menu.
Le principe est plutôt simple mais très efficace. Sachez que ces deux méthodes supportent aussi les sélecteurs CSS 3, bien plus complets ! Vous pouvez consulter leur liste sur la spécification du W3C.
Voyons maintenant les particularités de ces deux méthodes. La première, querySelector(), renvoie le premier élément trouvé correspondant au sélecteur CSS, tandis que querySelectorAll() va renvoyer tous les éléments (sous forme de tableau) correspondant au sélecteur CSS fourni. Prenons un exemple simple :
Code : HTML - Sélectionner
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="menu">
<div class="item">
<span>Élément 1</span>
<span>Élément 2</span>
</div>
<div class="publicite">
<span>Élément 3</span>
<span>Élément 4</span>
</div>
</div>
<div id="contenu">
<span>Introduction au contenu de la page...</span>
</div>
Maintenant, essayons le sélecteur CSS présenté plus haut : #menu .item span
Dans le code suivant, nous utilisons une nouvelle propriété nommée innerHTML, nous l'étudierons plus tard dans ce chapitre. Dans l'immédiat, sachez seulement qu'elle permet d'accéder au contenu d'un élément HTML.
Code : JavaScript - Sélectionner
1
2
3
4
5
6
7
var query = document.querySelector('#menu .item span'),
queryAll = document.querySelectorAll('#menu .item span');
alert(query.innerHTML); // Affiche : "Élément 1"
alert(queryAll.length); // Affiche : "2"
alert(queryAll[0].innerHTML + ' - ' + queryAll[1].innerHTML); // Affiche : "Élément 1 - Élément 2"
Nous obtenons bien les résultats escomptés ! Nous vous conseillons de bien vous rappeler ces deux méthodes. Elles sont déjà utiles sur des projets voués à tourner sur des navigateurs récents, et d'ici à quelques années elles pourraient bien devenir habituelles (le temps que les vieilles versions des navigateurs disparaissent pour de bon).
on en tient un bon là 