Parcourir le DOM

Pour comprendre ce qu'est le DOM, il suffit de lire sa définition peut détaillée mais concise sur Wikipédia :

Le Document Object Model est une interface de programmation normalisée par le W3C, qui permet à des scripts d'examiner et de modifier le contenu du navigateur web.

Parcourir le DOM, c'est parcourir notre contenu HTML. Pour éviter toute ambigüité il est important de préciser dans quel contexte s'inscrit l'utilisation du code JavaScript. Lorsqu'on parle de parcourir le contenu HTML, on parle généralement de celui de la page web sur laquelle les instructions JavaScript sont exécutées. Le JavaScript est inséré par le serveur web fournissant la page HTML, au même titre que les fichiers CSS accompagnent la page HTML.

Parcourir le DOM permettra de manipuler ses éléments comme des balises HTML ou des groupes de balises HTML, pour modifier leurs attributs, leur style, leur contenu, leur nature ou même ajouter de nouvelles balises ou en supprimer certaines. Savoir parcourir le DOM est alors essentiel pour arriver à ces fins.

Les getters

Parcourir le DOM se fait à l'aide de getters. Ce sont des méthodes permettant d'accéder à certains éléments du DOM à partir d'autres. On part toujours d'un seul élément principal qui est le "document", c'est l'élément qui englobe tous les autres éléments HTML de notre page, si l'on met de côtés quelques subtilités dont on se passera ici par soucis de simplicité.

Par exemple l'instruction :

var form = document.getElementById("formulaire");

permet de créer une variable "form" et d'y stocker l'élément (censé être unique) de notre contenu HTML qui possède l'id (l'attribut id) "formulaire". Élément sur lequel nous pouvons aussi appliquer des getters pour parcourir ses éléments enfants, c'est à dire les éléments HTML contenus à l'intérieur de cette balise.

Vous remarquerez ici que "document" est un élément du DOM sur lequel je peux utiliser des getters pour parcourir l'ensemble du contenu HTML de ma page.

Il faut savoir qu'il est aussi possible d'obtenir une liste d'éléments si notre getters nous permet de "sélectionner" plusieurs éléments. Par exemple, plusieurs éléments peuvent posséder la classe "elem" à l'intérieur d'une div avec un id "formulaire". Comme cela :

<div id="formulaire">
    <p class="elem">coucou</p>
    <p class="elem">salut</p>
    <p class="elem">bonjour</p>
</div>

Ainsi, pour récupérer une liste de tous ces paragraphes, nous pouvons faire :

var paragraphes = document.getElementById("formulaire").getElementsByClassName("elem");

Ici, nous voulons la liste de tous les éléments possédant la classe "elem" contenu dans la balise HTML d'id "formulaire", elle même contenu dans le document.

Vous avez énormément de getters différents, il ne sert à rien de tous les présenter ni même de tous les retenir. En effet, il suffit d'avoir compris leur principe pour savoir les utiliser. Si vous avez besoin d'un getters dont vous ne connaissez pas l'existence, il suffit de chercher sur les forums ou bien la doc JavaScript.

Sachez seulement qu'il existe une solution pour obtenir via les getters n'importe quel élément en utilisant n'importe lequel de ses attributs HTML. Voici quelques exemples de getters très utilisés ci-dessous :

Méthode	Description
getElementsById	Permet d'obtenir le premier élément d'un certains id.
getElementsByClassName	Permet d'obtenir la liste de tous les éléments possédant la classe indiquée.
getElementsByTagName	Permet d'obtenir la liste de tous les éléments d'un certains type de balise (div, p, span, input, form, etc..)
querySelector	Permet d'obtenir le premier élément rencontré concerné par le sélecteur CSS indiqué.
querySelectorAll	Permet d'obtenir la liste de tous les éléments concernés par le sélecteur CSS indiqué.

Vous pouvez vous rendre compte, si vous êtes familiers avec CSS qu'avoir des getters permettant de sélectionner des éléments par sélecteur CSS est de loin la méthode la plus puissante.