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

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 17/12/2018 11:28:50 sur php7 en 21.25 ms