UAA 12    Projets
☰

Méthodes de sélection du DOM

Méthode Retourne Type Notes
querySelector() Un seul élément Element Premier correspondant au sélecteur CSS
querySelectorAll() Une collection NodeList Statique, itérable
getElementById() Un seul élément Element Uniquement par id
getElementsByClassName() Une collection HTMLCollection Live, pas de forEach
getElementsByTagName() Une collection HTMLCollection Live, mise à jour automatique
getElementsByName() Une collection NodeList / HTMLCollection Selon navigateur

Voir l'exemple expliquant l'effet "Live" ou "static" de la méthode de sélection: L'exemple

Voir l'exemple de boucle infinie avec les collections "Live": L'exemple

Un exemple


<h1 id="titre">Titre principal</h1>
<p class="texte">Paragraphe 1</p>
<p class="texte">Paragraphe 2</p>
<div name="zone">Zone nommée</div>
	
<script>
  // --- Méthodes modernes ---
  const qs = document.querySelector('p');
  console.log('querySelector →', qs, '(Element)');

  const qsa = document.querySelectorAll('.texte');
  console.log('querySelectorAll →', qsa, '(NodeList)');

 // --- Méthodes historiques ---
  const byId = document.getElementById('titre');
  console.log('getElementById →', byId, '(Element)');

  const byClass = document.getElementsByClassName('texte');
  console.log('getElementsByClassName →', byClass, '(HTMLCollection)');

  const byTag = document.getElementsByTagName('p');
  console.log('getElementsByTagName →', byTag, '(HTMLCollection)');

  const byName = document.getElementsByName('zone');
  console.log('getElementsByName →', byName, '(NodeList ou HTMLCollection selon navigateur)');
</script>

Ce que ce fichier montre clairement