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 fonction querySelector() fonctionne de la même manière mais retourne uniquement le premier élément.


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...

Le guide complet du javascript

Le Guide Complet du JavascriptEn savoir plus sur mon livre aux Editions Micro Application
Le 18/11/2017 13:01:03 sur php7 en 28.27 ms