Comprendre querySelector en JavaScript : syntaxe, sélecteurs avancés, bonnes pratiques et exemples

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction : Qu’est-ce que querySelector ?

Aperçu de base et rôle de querySelector

querySelector est une méthode qui retourne le premier élément qui correspond au sélecteur spécifié.

Regardons l’exemple ci-dessous.

const element = document.querySelector('.example');
console.log(element);

Ce code récupère le premier élément avec le nom de classe example.

Même si plusieurs éléments existent pour le même sélecteur, seul le premier élément correspondant est retourné.

<div class="example">1</div>
<div class="example">2</div>

Dans ce cas, seul le premier <div class="example">1</div> sera sélectionné.

Pourquoi querySelector est important dans la manipulation du DOM

querySelector est particulièrement utile dans des situations comme les suivantes.

1. Sélection flexible d’éléments en utilisant des sélecteurs CSS

• Prend en charge une large gamme de sélecteurs tels que les classes, les ID, les attributs et les pseudo-classes.

1. Code propre même pour des structures complexes

• Trouve efficacement les éléments imbriqués ou les éléments avec des attributs spécifiques.

1. Style JavaScript cohérent et moderne

• Plus polyvalent que getElementById ou getElementsByClassName , et fonctionne bien avec les patterns JavaScript modernes.

Voici un exemple de sélection d’un bouton spécifique à l’intérieur d’un formulaire.

const submitButton = document.querySelector('form button[type="submit"]');
console.log(submitButton);

Ce code sélectionne uniquement le bouton de soumission à l’intérieur du formulaire.

Différence entre querySelector et querySelectorAll

Bien que querySelector ne retourne que le premier élément correspondant, querySelectorAll retourne tous les éléments correspondants sous forme de NodeList.

const elements = document.querySelectorAll('.example');
console.log(elements);

Ce code récupère tous les éléments avec le nom de classe example.

Résumé

Dans cette section, nous avons expliqué le concept de base et le rôle de la méthode querySelector de JavaScript.

Points clés :

1. Vous pouvez sélectionner flexiblement des éléments en utilisant des sélecteurs CSS
2. querySelector ne retourne que la première correspondance, tandis que querySelectorAll retourne toutes les correspondances
3. C’est une méthode importante pour une manipulation concise et efficace du DOM

Dans la section suivante, nous examinerons de plus près la syntaxe de base de querySelector et des exemples d’utilisation pratiques.

2. Syntaxe de base et utilisation de querySelector

Syntaxe de base

La syntaxe de base de querySelector est la suivante :

document.querySelector(selector);

• Argument : Une chaîne de sélecteur CSS.
• Valeur de retour : Le premier élément qui correspond au sélecteur. Si aucune correspondance n’est trouvée, il retourne null .

Exemples : Sélection d’éléments de base

1. Sélection par ID Puisqu’un ID est unique, vous pouvez sélectionner de manière fiable exactement un élément.

   const element = document.querySelector('#header');
   console.log(element);
   

Ce code sélectionne l’élément avec l’ID header.

2. Sélection par classe Lorsque vous spécifiez un nom de classe, seul le premier élément correspondant est retourné.

   const element = document.querySelector('.content');
   console.log(element);
   

Ce code sélectionne le premier élément avec le nom de classe content.

3. Sélection par nom de balise Vous pouvez également sélectionner des éléments en spécifiant un nom de balise.

   const element = document.querySelector('p');
   console.log(element);
   

Ce code sélectionne la première balise <p> sur la page.

Sélection d’éléments avec des sélecteurs combinés

En combinant des sélecteurs CSS, vous pouvez cibler des éléments de manière plus flexible.

1. Sélecteurs imbriqués Sélectionnez des éléments en spécifiant une relation parent-enfant.

   const element = document.querySelector('div.container p');
   console.log(element);
   

Ce code sélectionne la première balise <p> à l’intérieur d’un <div> avec le nom de classe container.

2. Sélecteurs d’attributs Sélectionnez des éléments qui ont un attribut spécifique.

   const element = document.querySelector('input[type="text"]');
   console.log(element);
   

.

Ce code sélectionne le premier élément <input> dont l’attribut type est text.

3. Utilisation des pseudo-classes Utilisez les pseudo-classes pour sélectionner des éléments dans un état ou une position particulière.

   const element = document.querySelector('li:first-child');
   console.log(element);
   

Ce code sélectionne le premier élément <li>.

Que faire lorsque querySelector ne trouve pas d’élément

querySelector renvoie null lorsqu’aucun élément correspondant n’est trouvé. Pour cette raison, il est important de vérifier que l’élément existe après l’avoir sélectionné.

const element = document.querySelector('.nonexistent');
if (element) {
  console.log('Element found');
} else {
  console.log('Element not found');
}

Ce code fonctionne en toute sécurité sans générer d’erreur même lorsque l’élément n’existe pas.

Résumé

Dans cette section, nous avons couvert la syntaxe de base et l’utilisation de querySelector.

Récapitulatif rapide :

1. Vous pouvez facilement sélectionner des éléments par ID, classe ou nom de balise
2. Vous pouvez sélectionner des éléments de manière flexible en combinant des sélecteurs complexes et des pseudo-classes
3. La gestion des erreurs pour les éléments manquants est également importante

Dans la prochaine section, nous explorerons des exemples d’utilisation avancée avec des sélecteurs plus puissants.

3. Exemples avancés : comment utiliser des sélecteurs plus puissants

Sélectionner des éléments spécifiques avec les sélecteurs d’attributs

Les sélecteurs d’attributs vous permettent de sélectionner de manière flexible des éléments qui possèdent des attributs ou des valeurs spécifiques.

1. Sélectionner un élément avec une valeur d’attribut spécifique

   const checkbox = document.querySelector('input[type="checkbox"]');
   console.log(checkbox);
   

Ce code sélectionne le premier élément <input> dont l’attribut type est checkbox.

2. Utiliser des correspondances partielles pour les valeurs d’attribut

   const link = document.querySelector('a[href^="https://"]');
   console.log(link);
   

Ce code sélectionne un lien dont l’attribut href commence par https://.

Sélecteurs d’attributs couramment utilisés :

Sélection avec les pseudo-classes et pseudo-éléments

Les pseudo-classes et pseudo-éléments facilitent la sélection d’éléments dans des états ou positions spécifiques.

1. Pseudo-classes pour l’état

   const activeLink = document.querySelector('a.active');
   console.log(activeLink);
   

Ce code sélectionne un lien qui possède la classe active.

2. Pseudo-classes pour la position

   const firstItem = document.querySelector('ul > li:first-child');
   console.log(firstItem);
   

Ce code sélectionne le premier élément de la liste.

Pseudo-classes couramment utilisées :

Filtrage fin avec des sélecteurs composés

Vous pouvez également combiner plusieurs sélecteurs pour exprimer des conditions plus complexes.

1. Filtrer par relation parent‑enfant

   const nestedElement = document.querySelector('div.container > p.text');
   console.log(nestedElement);
   

Ce code sélectionne le premier élément p avec la classe text à l’intérieur d’un élément div avec la classe container.

2. Combiner plusieurs conditions

   const inputField = document.querySelector('input[type="text"].required');
   console.log(inputField);
   

Ce code sélectionne le premier élément <input> qui a type="text" et possède également la classe required.

Résumé

Dans cette section, nous avons expliqué l’utilisation avancée des sélecteurs avec querySelector.

Points clés :

1. Les sélecteurs d’attributs permettent un filtrage flexible des éléments
2. Les pseudo-classes et pseudo-éléments vous permettent de cibler l’état et la position
3. Les sélecteurs composés facilitent la spécification de conditions détaillées et la sélection de cibles complexes

Dans la prochaine section, nous aborderons les précautions importantes et les meilleures pratiques lors de l’utilisation de querySelector.

4. Précautions et meilleures pratiques lors de l’utilisation de querySelector

Gestion des erreurs et vérifications de null

Si aucun élément ne correspond au sélecteur spécifié, querySelector renvoie null. Pour cette raison, vous devez toujours vérifier que l’élément existe avant d’essayer de le manipuler.

Exemple : mise en œuvre d’une vérification de null

const element = document.querySelector('.nonexistent');
if (element) {
  console.log('Element found');
  element.textContent = 'New text';
} else {
  console.log('Element not found');
}

Ce code évite en toute sécurité les erreurs même si l’élément n’existe pas.

Échappement des Caractères Spéciaux

Si votre sélecteur contient des caractères spéciaux, querySelector peut générer une erreur à moins que vous ne les échappiez correctement.

Exemple : Sélection d’un élément contenant des caractères spéciaux

HTML :

<div id="my.id">Special ID</div>

JavaScript :

const element = document.querySelector('#my\.id');
console.log(element);

Lors de la manipulation de caractères spéciaux (par exemple, ., #, [, ], etc.), échappez-les en utilisant une barre oblique inverse (\).

Considérations de Performance

1. Éviter les sélecteurs profondément imbriqués À mesure que les sélecteurs deviennent plus complexes, le navigateur peut prendre plus de temps pour trouver l’élément cible. Utilisez des sélecteurs plus simples chaque fois que possible.

Non recommandé

const element = document.querySelector('div.container > ul > li.item > span.text');

Recommandé

const container = document.querySelector('.container');
const textElement = container.querySelector('.text');

2. Sélectionner efficacement plusieurs éléments Utilisez querySelectorAll pour récupérer tous les éléments cibles puis les filtrer au besoin.

   const items = document.querySelectorAll('.item');
   items.forEach((item) => {
     console.log(item.textContent);
   });
   

Meilleures Pratiques

1. Utiliser des sélecteurs spécifiques Utilisez des sélecteurs spécifiques pour vous assurer de sélectionner uniquement l’élément (ou les éléments) prévu(s).

   const button = document.querySelector('button.submit');
   

2. Utiliser des conventions de nommage cohérentes Concevez les noms de classes CSS et les ID en utilisant des règles cohérentes pour améliorer la lisibilité des sélecteurs.
3. Se concentrer sur du code réutilisable Si vous sélectionnez fréquemment certains éléments, il est pratique d’encapsuler la logique dans une fonction réutilisable.

   function getElement(selector) {
     const element = document.querySelector(selector);
     if (!element) {
       console.warn(`Element not found: ${selector}`);
     }
     return element;
   }
   
   const header = getElement('#header');
   

Résumé

Dans cette section, nous avons couvert les précautions clés et les moyens efficaces d’utiliser querySelector.

Points clés :

1. Prévenir les erreurs en effectuant systématiquement des vérifications de nullité
2. Échapper correctement les sélecteurs qui incluent des caractères spéciaux
3. Concevoir des sélecteurs simplement en gardant la performance à l’esprit
4. Utiliser des fonctions et des conventions de nommage pour améliorer la réutilisabilité et la lisibilité

Dans la section suivante, nous introduirons des exemples pratiques utiles dans les projets réels.

5. Questions Fréquemment Posées (FAQ) et Solutions

Quelle est la Différence Entre querySelector et getElementById ?

Question :
querySelector et getElementById peuvent tous deux être utilisés pour sélectionner des éléments. Quelle est la différence entre eux ?

Réponse :

Comparaison d’utilisation :

// With querySelector
const element1 = document.querySelector('#example');

// With getElementById
const element2 = document.getElementById('example');

Lequel utiliser ?

• Pour une sélection simple basée sur l’ID , getElementById est rapide et recommandé.
• Lorsque vous avez besoin d’un ciblage flexible basé sur les sélecteurs , utilisez querySelector .

Pourquoi querySelector Ne Fonctionne-t-il Pas Parfois ?

Question :
Bien que mon code semble correct, querySelector ne fonctionne pas. Quelle pourrait en être la raison ?

Réponse :

1. L’élément n’existe pas encore dans le DOM

• Le DOM peut ne pas être entièrement chargé lorsque le script s’exécute. Solution : Utilisez l’événement DOMContentLoaded.

  document.addEventListener('DOMContentLoaded', () => {
    const element = document.querySelector('.example');
    console.log(element);
  });
  

2. Le sélecteur est incorrect

• Le nom de la classe ou l’ID pourrait être erroné.

À vérifier :

• Vérifiez le sélecteur dans les outils de développement de votre navigateur.

  const element = document.querySelector('.my-class');
  console.log(element); // Check the result in DevTools
  

3. L’élément est ajouté dynamiquement

• Si l’élément est ajouté dynamiquement via JavaScript, il peut ne pas exister au moment où vous essayez de le sélectionner pour la première fois.

Solution :
Attachez un écouteur d’événement à un élément parent pour gérer les éléments ajoutés dynamiquement.

document.body.addEventListener('click', (e) => {
  if (e.target.matches('.dynamic-element')) {
    console.log('Clicked');
  }
});

Comment accéder aux éléments ajoutés dynamiquement

Question :
Les éléments ajoutés dynamiquement peuvent-ils être sélectionnés avec querySelector ?

Réponse :
Oui, ils le peuvent. Cependant, vous devez faire attention au moment où l’élément est ajouté.

Solution 1 : Observer les éléments dynamiques

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length) {
      const newElement = document.querySelector('.dynamic-element');
      if (newElement) {
        console.log('A new element was added:', newElement);
      }
    }
  });
});

observer.observe(document.body, { childList: true, subtree: true });

Solution 2 : Utiliser setTimeout ou setInterval

Si l’élément est ajouté après un certain délai, vous pouvez le surveiller ainsi :

setTimeout(() => {
  const dynamicElement = document.querySelector('.dynamic-element');
  console.log(dynamicElement);
}, 1000); // Check for the element after 1 second

Résumé

Dans cette section, nous avons couvert les questions courantes et les conseils de dépannage pour l’utilisation de querySelector.

Récapitulatif rapide :

1. Comprendre quand utiliser querySelector vs. getElementById.
2. Si cela ne fonctionne pas, vérifiez le timing du chargement du DOM et les erreurs de sélecteur.
3. Pour les éléments dynamiques, utilisez la délégation d’événements ou le MutationObserver.

Dans la section suivante, nous résumerons les points clés pour utiliser efficacement querySelector.

6. Exemples pratiques : comment utiliser querySelector dans des projets réels

Récupérer les valeurs des champs de formulaire et les valider

Scénario : Lorsqu’un utilisateur saisit des valeurs dans un formulaire, vous les récupérez et effectuez une validation.

HTML

<form id="userForm">
  <input type="text" id="username" placeholder="Username">
  <input type="email" id="email" placeholder="Email address">
  <button type="submit">Submit</button>
</form>

JavaScript

const form = document.querySelector('#userForm');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // Prevent form submission

  const username = document.querySelector('#username').value;
  const email = document.querySelector('#email').value;

  if (!username) {
    alert('Please enter a username');
    return;
  }

  if (!email.includes('@')) {
    alert('Please enter a valid email address');
    return;
  }

  alert('The form was submitted successfully');
});

Points clés :

• Utilisez la propriété value pour obtenir les valeurs des champs.
• Effectuez des vérifications de validation simples sur les entrées de l’utilisateur.
• Utilisez des écouteurs d’événement pour personnaliser le comportement de soumission du formulaire.

Comment ajouter des écouteurs d’événements aux éléments ajoutés dynamiquement

Scénario : Appliquer des écouteurs d’événements aux éléments qui sont ajoutés dynamiquement via JavaScript.

HTML

<div id="container">
  <button id="addButton">Add a button</button>
</div>

JavaScript

const container = document.querySelector('#container');
const addButton = document.querySelector('#addButton');

// Add a new button
addButton.addEventListener('click', () => {
  const newButton = document.createElement('button');
  newButton.classList.add('dynamic-button');
  newButton.textContent = 'Click me!';
  container.appendChild(newButton);
});

// Capture events on the parent element
container.addEventListener('click', (event) => {
  if (event.target.classList.contains('dynamic-button')) {
    alert('The new button was clicked!');
  }
});

Points clés :

• Puisque les éléments ajoutés dynamiquement ne peuvent pas être référencés directement, attachez le gestionnaire d’événement à un élément parent.
• Utilisez event.target pour identifier quel élément a été cliqué.

Ouverture et fermeture d’une fenêtre modale

Scénario : Implémenter le comportement d’ouverture/fermeture de la modale.

HTML

<div id="modal" class="modal hidden">
  <div class="modal-content">
    <span id="closeModal" class="close">&times;</span>
    <p>This is the modal content.</p>
  </div>
</div>
<button id="openModal">Open modal</button>

CSS

.hidden {
  display: none;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}

JavaScript

const modal = document.querySelector('#modal');
const openModal = document.querySelector('#openModal');
const closeModal = document.querySelector('#closeModal');

// Open the modal
openModal.addEventListener('click', () => {
  modal.classList.remove('hidden');
});

// Close the modal
closeModal.addEventListener('click', () => {
  modal.classList.add('hidden');
});

// Close when clicking outside the modal
modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.classList.add('hidden');
  }
});

Points clés :

• Utilisez classList pour ajouter/supprimer des classes et basculer la visibilité.
• Améliorez l’UX en permettant à la modale de se fermer lorsqu’on clique en dehors de la zone de contenu.

Résumé

Dans cette section, nous avons présenté des exemples pratiques d’utilisation de querySelector dans des scénarios de développement réels.

Ce que vous avez appris :

1. Implémenter une gestion sécurisée des formulaires en récupérant et en validant les entrées utilisateur.
2. Gérer de manière flexible les éléments ajoutés dynamiquement en utilisant la délégation d’événements.
3. Améliorer l’interface utilisateur en implémentant le comportement d’ouverture/fermeture de la modale.

Utilisez ces exemples comme références et appliquez‑les à vos propres projets de développement. Dans la prochaine section, nous conclurons l’article en résumant les points clés de l’utilisation de querySelector.

7. Résumé : Points clés pour utiliser querySelector efficacement

Dans cet article, nous avons couvert en détail la méthode querySelector de JavaScript, des bases aux cas d’utilisation avancés. Enfin, passons en revue les points les plus importants et résumons comment l’utiliser efficacement.

Le rôle central de querySelector

• Sélection flexible d’éléments : Vous pouvez sélectionner efficacement des éléments du DOM en utilisant des sélecteurs CSS.
• Syntaxe simple : Vous pouvez sélectionner les éléments de manière intuitive en utilisant les noms de classe, les ID, les noms de balises et les sélecteurs d’attributs.
• Fonctionne avec les éléments dynamiques : En attachant des gestionnaires d’événements aux éléments parents, vous pouvez gérer les éléments ajoutés ultérieurement.

Exemple de la syntaxe de base :

const element = document.querySelector('.example');

Utilisation avancée et considérations importantes

1. Utilisez des sélecteurs avancés

• Les sélecteurs d’attributs et les pseudo‑classes vous permettent de cibler les éléments de manière plus précise et flexible.
• Exemple :

  const element = document.querySelector('input[type="checkbox"]:checked');
  

2. Écrivez du code soucieux des performances

• Réduisez la charge de traitement en utilisant des sélecteurs simples chaque fois que possible.
• Transformez la logique de sélection fréquemment utilisée en fonctions réutilisables.

2. Gestion d’erreurs approfondie

• Effectuez des vérifications null et gérez les cas où l’élément n’existe pas.
• Exemple :

  const element = document.querySelector('.nonexistent');
  if (element) {
    console.log('Element found');
  } else {
    console.log('Element not found');
  }
  

Revoir les exemples pratiques

• Validation de formulaire : Validez les valeurs d’entrée pour implémenter un traitement sécurisé du formulaire.
• Gestion d’éléments dynamiques : Gérez de manière flexible les éléments générés via JavaScript.
• Contrôle de la fenêtre modale : Ajoutez un comportement interactif pour améliorer l’UI/UX.

À travers ces exemples, vous avez découvert la praticité et l’extensibilité de querySelector.

Conseils pour tirer le meilleur parti de querySelector

1. Exploitez vos outils de développement

• Utilisez les outils de développement de votre navigateur pour valider et tester les sélecteurs.

1. Priorisez la lisibilité

• Concevez les noms de sélecteurs et la structure du code pour qu’ils soient faciles à comprendre, améliorant ainsi la maintenabilité.

1. Utilisez querySelectorAll conjointement lorsque c’est nécessaire

• Lors du travail avec plusieurs éléments, utilisez querySelectorAll pour mettre en œuvre un traitement efficace.

Résumé

querySelector est une méthode puissante qui rend la manipulation du DOM simple et efficace.

Principaux enseignements de cet article :

• Vous pouvez comprendre tout, de l’utilisation de base aux exemples avancés, de manière structurée.
• En combinant sélecteurs et pseudo‑classes, vous pouvez cibler les éléments avec plus de flexibilité.
• En gérant correctement les erreurs et en tenant compte des performances, vous pouvez écrire un code plus pratique et fiable.

Lorsque vous travaillez sur la manipulation du DOM en JavaScript, assurez-vous d’appliquer les techniques présentées dans cet article.

Comme prochaine étape, approfondissez vos connaissances en manipulation du DOM et améliorez vos compétences en apprenant à combiner querySelector avec d’autres méthodes !