Retourner à la page d'accueil de TJS

Méthode : window.document.querySelectorAll()

          

Retourne une liste d'objets HTML correspondant au motif CSS du sélecteur

Syntaxe
Array document.querySelectorAll(String selecteur)

Description
Retourne une liste d'objets HTMLElement correspondant au motif du sélecteur.
Le sélecteur est une chaîne de caractères correspondant à un format CSS pour identifier les objets du DOM.

Pour rappel, voici quelques exemples de sélecteurs CSS utilisables ici :
#identifiant correspond aux éléments HTML ayant comme attribut id="identifiant".
.maClasse correspond aux éléments HTML ayant comme attribut class="maClasse".
tag correspond aux éléments HTML ayant comme balise <tag>.

La méthode querySelectorAll() est aussi applicable sur les éléments HTML HTMLElement pour réaliser une sous-sélection sur une zone du DOM plus restreinte.

La fonction querySelector() fonctionne de la même manière mais retourne uniquement le premier élément.


Equivalent dans d'autres langages
Equivalent en jQuery à $(selecteur) : Retourne les éléments HTML correspondant au sélecteur CSS.

Exemple Quelques recherches par sélecteurs
Code source
<div id="bloc500">BLOC #bloc500</div>
<div>
 <span class="bloc700">BLOC .bloc700</span>
 <span class="bloc700">BLOC .bloc700</span>
 <span class="bloc700">BLOC .bloc700</span>
</div>
<div class="bloc250 other">bloc div.bloc250.other</div>
<script type="text/javascript">

/* Recherche des éléments avec id=bloc500 */
console.time("#bloc500");
for (var i=0; i<1000; i++) {
 var elems=document.querySelectorAll("#bloc500");
 if (elems.length>0) {
   for (var j=0; j<elems.length; j++) {
     elems[j].style.border="2px solid #f00";
   }
 }
}
console.timeEnd("#bloc500");

/* Recherche des éléments span de class bloc700 */
console.time("div.bloc700");
for (var i=0; i<1000; i++) {
 var elems=document.querySelectorAll("span.bloc700");
 if (elems.length>0) {
   for (var j=0; j<elems.length; j++) {
     elems[j].style.border="2px solid #0f0";
   }
 }
}
console.timeEnd("div.bloc700");

/* Recherche des éléments div de classes bloc250 et other */
console.time("div.bloc250.other");
for (var i=0; i<1000; i++) {
 var elems=document.querySelectorAll("div.bloc250.other");
 if (elems.length>0) {
   for (var j=0; j<elems.length; j++) {
     elems[j].style.border="2px solid #00f";
   }
 }
}
console.timeEnd("div.bloc250.other");


</script>

Résultat
BLOC #bloc500
BLOC .bloc700 BLOC .bloc700 BLOC .bloc700
bloc div.bloc250.other
Emulation de la console
Explication
Test de motifs de différents sélecteurs CSS et mesure de performances.
Page mise à jour le

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets Javascript



Chargement
en cours...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 22/08/2019 14:31:07 sur php7 en 83.62 ms