Naviguer dans le document
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 :
<!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 :
<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 ».
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().
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 :
<div id="myDiv"> <p>Un peu de texte <a>et un lien</a></p> </div>
<script> var div = document.getElementById('myDiv');
alert(div); </script> |
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.
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 :
var divs = document.getElementsByTagName('div');
for (var i = 0, c = divs.length ; i < c ; i++) { alert('Element n° ' + (i + 1) + ' : ' + divs[i]); } |
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 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.
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 :
#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 :
<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.
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).
Le Javascript voit les éléments HTML comme étant des objets, cela veut donc dire que chaque élément HTML possède des propriétés et des méthodes. Cependant faites bien attention parce que tous ne possèdent pas les mêmes propriétés et méthodes. Certaines sont néanmoins communes à tous les éléments HTML, car tous les éléments HTML sont d'un même type : le type Node, qui signifie « nœud » en anglais.
Nous avons vu qu'un élément <div> est un objet HTMLDivElement, mais un objet, en Javascript, peut appartenir à différents groupes. Ainsi, notre <div> est un HTMLDivElement, qui est un sous-objet d'HTMLElement qui est lui-même un sous-objet d'Element. Element est enfin un sous-objet de Node. Ce schéma est plus parlant :
En Javascript, un objet peut appartenir à plusieurs groupes
L'objet Node apporte un certain nombre de propriétés et de méthodes qui pourront être utilisées depuis un de ses sous-objets. En clair, les sous-objets héritent des propriétés et méthodes de leurs objets parents. Voilà donc ce que l'on appelle l'héritage.
Créé avec HelpNDoc Personal Edition: Générateur de documentation d'aide HTML gratuit