Maîtriser querySelector et querySelectorAll en JavaScript

querySelector et querySelectorAll en JavaScript

Les méthodes querySelector et querySelectorAll sont des outils puissants en JavaScript pour sélectionner des éléments dans le DOM. Ils permettent aux développeurs d'utiliser des sélecteurs CSS pour identifier et manipuler des éléments HTML.

---

1. querySelector

La méthode querySelector sélectionne le premier élément qui correspond au sélecteur CSS spécifié.

Syntaxe :

document.querySelector(selector);

• selector : une chaîne représentant un sélecteur CSS (par exemple, "#id", ".class", "tag").

Exemple :

<div>





<pre class="brush:php;toolbar:false">const firstText = document.querySelector(".text");
console.log(firstText.textContent); // Output: First paragraph

---

2. querySelectorAll

La méthode querySelectorAll sélectionne tous les éléments qui correspondent au sélecteur CSS spécifié et les renvoie sous la forme d'une NodeList.

Syntaxe :

document.querySelectorAll(selector);

• selector : Une chaîne représentant un sélecteur CSS.

Exemple :

const allTexts = document.querySelectorAll(".text");
allTexts.forEach((text) => console.log(text.textContent));
// Output:
// First paragraph
// Second paragraph

Accès aux éléments dans NodeList :

const secondText = allTexts[1];
console.log(secondText.textContent); // Output: Second paragraph

---

3. Différences entre querySelector et querySelectorAll

Fonctionnalité querySelector querySelectorAll ête>

Feature	querySelector	querySelectorAll
Result	First matching element	All matching elements
Return Type	Single DOM element	NodeList (array-like structure)
Iteration	Not iterable	Iterable (e.g., using forEach)
Use Case	When one element is needed	When multiple elements are needed

Résultat Premier élément correspondant Tous les éléments correspondants Type de retour Élément DOM unique NodeList (structure de type tableau) Itération Non itérable Itérable (par exemple, en utilisant forEach) Cas d'utilisation Quand un élément est nécessaire Lorsque plusieurs éléments sont nécessaires

---

4. Combinaison de sélecteurs

Vous pouvez combiner des sélecteurs CSS pour des requêtes plus spécifiques.

Exemple :

document.querySelector(selector);

---

5. Cas d'utilisation courants

Sélection par ID :

<div>





<pre class="brush:php;toolbar:false">const firstText = document.querySelector(".text");
console.log(firstText.textContent); // Output: First paragraph

Sélection par classe :

document.querySelectorAll(selector);

Sélection par nom de balise :

const allTexts = document.querySelectorAll(".text");
allTexts.forEach((text) => console.log(text.textContent));
// Output:
// First paragraph
// Second paragraph

Sélecteurs d'attributs :

const secondText = allTexts[1];
console.log(secondText.textContent); // Output: Second paragraph

Nième sélecteur d'enfant :

const containerParagraph = document.querySelector("#container .text");
console.log(containerParagraph.textContent); // Output: First paragraph

---

6. Itération sur les éléments de querySelectorAll

Puisque querySelectorAll renvoie une NodeList, vous pouvez la parcourir en utilisant forEach, for...of ou indexation.

Exemple :

const header = document.querySelector("#header");

---

7. Collection en direct vs collection statique

• querySelectorAll renvoie une NodeList statique, ce qui signifie qu'elle ne se met pas à jour si le DOM change.
• Utilisez getElementsByClassName ou getElementsByTagName pour une collection en direct.

Exemple :

const buttons = document.querySelectorAll(".button");

---

8. Gestion des erreurs

Si aucun élément correspondant n'est trouvé :

• querySelector : renvoie null.
• querySelectorAll : renvoie une NodeList vide.

Exemple :

const paragraphs = document.querySelectorAll("p");

---

9. Résumé

• Utilisez querySelector pour sélectionner un seul élément et querySelectorAll pour plusieurs éléments.
• Les deux méthodes prennent en charge de puissants sélecteurs CSS pour un ciblage précis.
• querySelectorAll renvoie une NodeList statique, qui peut être facilement itérée.
• Ce sont des outils polyvalents pour la manipulation moderne du DOM et sont souvent préférés aux méthodes plus anciennes comme getElementById ou getElementsByClassName.

Maîtriser ces méthodes rendra votre code JavaScript plus propre et plus efficace !

Bonjour, je m'appelle Abhay Singh Kathayat !
Je suis un développeur full-stack avec une expertise dans les technologies front-end et back-end. Je travaille avec une variété de langages et de frameworks de programmation pour créer des applications efficaces, évolutives et conviviales.
N'hésitez pas à me contacter à mon e-mail professionnel : kaashshorts28@gmail.com.