Rechercher des éléments dans le HTML

Recherche

Si vous voulez avoir accès à un élément HTML dans votre code Javascript, vous devez tout d'abords le rechercher dans l'arbre du DOM à partir de sa racine, soit l'object document. Cette recherche est obligatoire. On ne peut pas accéder directement à un élément de l'arbre. Heureusement, les navigateurs nous simplifient la tâche en nous offrant un ensemble de fonctionnalités pour y arriver.

Une fois l'élément recherché et trouvé, on pourra le stocker dans une variable pour y accéder plus facilement et éviter d'avoir à le rechercher à chaque fois. Ce sera plus performant et le code sera plus lisible.

Il existe plusieurs fonctions pour faire nos recherches dans le HTML. Nous verrons les plus utile dans cette page.

Recherche par identifiant

La recherche d'un élément par son identifiant est la plus rapide et la plus simple. La méthode est facile à utiliser:

On ajoute un identifiant id à l'élément que l'on veut rechercher dans le HTML.
On utilise la méthode getElementById de l'objet document pour le retrouver dans le Javascript.

Voici un exemple:

HTML

Javascript

Dans l'exemple ci-dessus, on recherche l'élément avec l'identifiant form-erreur dans le HTML et on le stocke dans la variable formErreur. On pourra ensuite accéder directement à cet élément avec cette variable.

Attention:

Il est important de comprendre que l'identifiant id doit être unique dans la page. Si vous avez plusieurs éléments avec le même identifiant, le HTML n'est pas valide et la méthode getElementById retournera uniquement le premier élément.

Recherche par sélecteur CSS

Lorsque vous ne pouvez pas utiliser un identifiant pour rechercher un élément, ou simplement parce que vous ne voulez pas polluer votre HTML avec une énorme quantité d'identifiants, vous pouvez utiliser les sélecteurs CSS pour faire vos recherches. Pour ce faire, on utilise la fonction querySelector, qui appartient elle aussi à l'objet document. Cette fonction prends en paramètre un sélecteur CSS et retourne le premier élément qui réponds à ce sélecteur.

Voici un exemple:

HTML

Javascript

Dans cet exemple, on recherche le lien qui est actif dans la barre de navigation. On utilise donc un sélecteur CSS dans la fonction querySelector pour trouver l'élément en question. On voit aussi que l'on essaie de trouver les liens qui ne sont pas actifs avec le sélecteur :not(.actif). Il est important de noter que la fonction querySelector retourne uniquement le premier élément qui correspond au sélecteur. Dans ce cas-ci, seul le premier lien sera retourné et stocké dans la variable.

À noter

Dans les derniers exemples, nous utilisons ici le mot-clé const pour déclarer nos variables. À première vue, on pourrait croire que c'est parce que l'on ne modifiera pas ces éléments HTML, mais ce n'est pas nécessairement le cas. On utilise ici const pour dire que la variable ne peut pas être réassignée. Cependant, on peut toujours modifier l'objet HTML lui-même en modifiant ses propriétés qui elles, ne sont pas constantes.

Recherche de plusieurs éléments

Si vous voulez rechercher plusieurs éléments dans votre page web, la façon la plus simple est d'utiliser la fonction querySelectorAll. Cette fonction prends en paramètre un sélecteur CSS, tout comme la fonction querySelector, mais elle retournera un tableau de tous les éléments qui correspondent au sélecteur CSS au lieu de seulement le premier.

Voici un exemple:

HTML

Javascript

Dans cet exemple, on recherche tous les boutons radio de la question 1 et on les stocke dans un tableau, ce que la fonction querySelectorAll retourne fait. Si nous voulons par la suite effectuer des opérations sur tous ces éléments, nous devons les parcourir un par un avec une boucle.

<< Page précédente Page suivante >>