Recherche JavaScript : getElement*, querySelector*
Apprendre à rechercher et sélectionner des éléments dans le Document Object Model (DOM) est essentiel pour les développeurs JavaScript souhaitant rendre les sites web interactifs. Ce guide couvre à la fois les anciennes méthodes DOM et les sélecteurs CSS modernes, et inclut des exemples simples que vous pouvez tester.
Accès efficace aux éléments : getElementById
La méthode getElementById est un moyen rapide et fiable d'accéder à un élément spécifique par son ID unique. Étant donné que le navigateur peut optimiser les recherches par ID, cette méthode est généralement plus rapide que les méthodes de sélecteurs CSS. Dans l'exemple ci-dessous, le texte initial « Default text » est immédiatement remplacé par le code JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>getElementById Example</title>
</head>
<body>
<div id="main-content">Default text</div>
<script>
const element = document.getElementById('main-content');
element.innerHTML = "Modified text!"
</script>
</body>
</html>Result
Accès à plusieurs éléments : getElementsByClassName et getElementsByTagName
INFO
Lorsque vous sélectionnez des éléments par leur nom de classe ou leur nom de balise, vous obtenez un objet HTMLCollection. Il s'agit d'une collection dynamique qui se met à jour automatiquement lorsque le DOM change, et qui se comporte comme un tableau pour accéder aux éléments par index et lire la propriété length. Pour itérer dessus, vous devez d'abord le convertir en un tableau avec la méthode Array.from.
Exemple avec getElementsByClassName
Accédez à plusieurs éléments ayant la même classe en utilisant getElementsByClassName. Dans cet exemple, nous avons deux éléments div avec le même nom de classe. Nous les modifions tous les deux en sélectionnant ces éléments par leur nom de classe.
<!DOCTYPE html>
<html>
<head>
<title>getElementsByClassName Example</title>
</head>
<body>
<div class="info">First Info</div>
<div class="info">Second Info</div>
<script>
const infoElements = document.getElementsByClassName('info');
Array.from(infoElements).forEach(el => el.innerHTML = "MODIFIED!");
</script>
</body>
</html>Result
Exemple avec getElementsByTagName
Récupérez des éléments par leur nom de balise avec getElementsByTagName. C'est exactement similaire au précédent, mais cette fois nous sélectionnons par nom de balise, et non par nom de classe.
<!DOCTYPE html>
<html>
<head>
<title>getElementsByTagName Example</title>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<script>
const paragraphs = document.getElementsByTagName('p');
Array.from(paragraphs).forEach(el => el.innerHTML = "MODIFIED!");
</script>
</body>
</html>Result
Recherches flexibles avec querySelector et querySelectorAll
Sélection avec querySelector
Utilisez querySelector pour trouver le premier élément correspondant à un sélecteur CSS. Dans cet exemple, nous sélectionnons le premier élément ayant la classe text qui est un enfant direct de l'élément ayant l'ID main.
<!DOCTYPE html>
<html>
<head>
<title>QuerySelector Example</title>
</head>
<body>
<div id="main"><span class="text">This will be replaced</span></div>
<div id="other"><span class="text">This one doesn't change</span></div>
<script>
const spanInsideDiv = document.querySelector('#main > .text');
spanInsideDiv.innerHTML = "MODIFIED!";
</script>
</body>
</html>Result
Récupération de plusieurs éléments avec querySelectorAll
querySelectorAll vous permet de sélectionner tous les éléments correspondant à un sélecteur CSS. Notez que contrairement à getElementsBy*, qui retourne une HTMLCollection dynamique, querySelectorAll retourne un NodeList statique qui capture un instantané des éléments au moment de la sélection et ne se met pas à jour automatiquement lorsque le DOM change.
<!DOCTYPE html>
<html>
<head>
<title>QuerySelectorAll Example</title>
</head>
<body>
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
</ul>
<script>
const items = document.querySelectorAll('.item');
items.forEach(item => item.innerHTML = "MODIFIED!");
</script>
</body>
</html>Result
Conclusion
Les techniques présentées dans ce guide offrent aux développeurs JavaScript des outils puissants pour accéder et manipuler le DOM efficacement. En intégrant ces méthodes, les développeurs peuvent considérablement améliorer l'interactivité et la réactivité de leurs applications web. Ces exemples sont prêts à être testés dans un fichier HTML, offrant une expérience pratique avec chaque méthode abordée.
Pratique
Parmi les affirmations suivantes, lesquelles sont correctes concernant les méthodes querySelector et getElementById de JavaScript ?