Introduction à l'interrogation du DOM

L'interrogation du DOM consiste à sélectionner et accéder à des éléments spécifiques dans le document afin de pouvoir les manipuler ou interagir avec eux. JavaScript propose plusieurs méthodes pour interroger les éléments, chacune ayant son propre cas d'utilisation et comportement.

GetElementById

getElementById est utilisé pour sélectionner un seul élément par son identifiant unique. Il s'agit de l'une des méthodes les plus couramment utilisées car les identifiants doivent être uniques dans le document.
Cas d'utilisation : Idéal pour sélectionner un élément spécifique lorsque son identifiant est connu.
Renvoie : Un seul élément ou null si aucun élément n'est trouvé.

// HTML:
<div id="header">Welcome</div>

// JS:
const headerEl = document.getElementById('header');
console.log(headerEl.textContent); // Output: Welcome

GetElementsByClassName

getElementsByClassName sélectionne les éléments par leur nom de classe et renvoie une HTMLCollection dynamique d'éléments.
Cas d'utilisation : Utile lorsque plusieurs éléments avec la même classe doivent être sélectionnés.
Renvoie : Une HTMLCollection dynamique des éléments correspondants, qui se met à jour si le DOM change.
Limites : Impossible d'utiliser directement les méthodes de tableau ; conversion en tableau nécessaire si besoin.

// HTML:
<p class="text">First paragraph</p>
<p class="text">Second paragraph</p>

// JS:
const textEls = document.getElementsByClassName('text');
console.log(textEls); // Output: HTMLCollection(2) [p.text, p.text]
console.log(textEls[0].textContent); // Output: First paragraph
console.log(textEls[1].textContent); // Output: Second paragraph

GetElementsByTagName

getElementsByTagName sélectionne les éléments par leur nom de balise (par exemple, div, p) et retourne une HTMLCollection dynamique.
Cas d'utilisation : Approprié pour sélectionner tous les éléments d'un type particulier.
Retourne : Une HTMLCollection dynamique d'éléments.
Limites : Non spécifique, car il sélectionne tous les éléments d'une balise donnée dans le contexte.

// HTML:
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

// JS:
const listItems = document.getElementsByTagName('li');
console.log(listItems); // Output: HTMLCollection(2) [li, li]
console.log(listItems.length); // Output: 2

QuerySelector

querySelector sélectionne le premier élément correspondant à un sélecteur CSS. Cette méthode est polyvalente, permettant d'utiliser n'importe quel sélecteur CSS valide pour trouver des éléments.
Cas d'utilisation : Idéal pour sélectionner la première correspondance d'un sélecteur CSS.
Retourne : Le premier élément correspondant ou null si aucune correspondance n'est trouvée.

// HTML:
<div class="box" id="main-box">Content</div>

// JS:
const boxEl = document.querySelector('.box'); // Selects the first .box element
console.log(boxEl.id); // Output: main-box
console.log(boxEl.className); // Output: box
console.log(boxEl.textContent); // Output: Content

QuerySelectorAll

querySelectorAll sélectionne tous les éléments correspondant à un sélecteur CSS et retourne une NodeList statique. Contrairement à d'autres méthodes, elle ne se met pas à jour dynamiquement si le DOM change.
Cas d'utilisation : Parfait pour sélectionner plusieurs éléments avec des sélecteurs complexes.
Retourne : Une NodeList statique d'éléments qui ne se met pas à jour automatiquement.

// HTML:
<p class="content">Paragraph</p>
<span class="content">Text</span>
<div class="content">Container</div>

// JS:
const contentEls = document.querySelectorAll('.content');
console.log(contentEls); // Output: NodeList(3) [p.content, span.content, div.content]
console.log(contentEls.length); // Output: 3

Différences entre ces méthodes

Types de retour

Collections dynamiques vs. statiques

Sélecteurs CSS

Performance

Exemple pratique : Validation de formulaire

Combinaison de ces méthodes dans un scénario concret : mise en évidence des champs de formulaire invalides à l'aide de classes.

La méthode getElementById sélectionne l’élément formulaire, tandis que querySelectorAll récupère tous les champs de saisie ayant la classe .input-field. Un écouteur d’événement sur l’événement "submit" du formulaire empêche l’envoi par défaut et vérifie chaque champ de saisie. Si un champ est vide, il est mis en évidence par une bordure rouge, tandis que les champs remplis reçoivent une bordure verte, fournissant ainsi un retour visuel immédiat à l’utilisateur.