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.
/* 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 .bloc700BLOC .bloc700BLOC .bloc700
bloc div.bloc250.other
Emulation de la console
Explication
Test de motifs de différents sélecteurs CSS et mesure de performances.
Retourne les éléments HTML correspondant au sélecteur CSS.
En savoir plus
