Trouver des éléments HTML par sélecteurs CSS

Trouver des éléments HTML par sélecteurs CSS

Si vous voulez trouver tous les éléments HTML qui correspond à un sélecteur CSS spécifié (id, noms de classe, les types, les attributs, les valeurs des attributs, etc.), utilisez la méthode querySelectorAll ().

Cet exemple retourne une liste de tous les éléments <p> class = « maison ».

var x = document.querySelectorAll("p.maison");

Exemple

<h2>Recherche d'éléments HTML par Query Selector</h2>
<p>Hello!</p>
<p class="maison">Le Dom est très utilisé.</p>
<p class="maison">Cet exemple démontre la méthode <strong>querySelectorAll</strong>.</p>

<p id="auto"></p>

<script>

var x = document.querySelectorAll("p.maison");
document.getElementById("auto").innerHTML =
'Le premier paragraphe (index 0) avec class="maison": ' + x[0].innerHTML;

</script>
<button onclick="resultat()"><span style="color: #00ccff;">Vous pouvez changer le texte ici</span></button>
<script>
function resultat() {
document.getElementById("auto").innerHTML = 'Le second paragraphe (index 1) avec class="maison": ' + x[1].innerHTML;
}
</script>

Résultat de l'exemple

Recherche d'éléments HTML par Query Selector

Hello!

Le Dom est très utilisé.

Cet exemple démontre la méthode querySelectorAll.