`document.querySelectorAll` în JavaScript

Pagina web (DOM) Toate browserele moderne

Găsește toate elementele din pagină care se potrivesc cu un selector CSS.

Sintaxă

document.querySelectorAll(selectorCss)

Ce face `document.querySelectorAll`

querySelectorAll returnează o listă (NodeList) cu toate elementele găsite, în ordinea din pagină. Dacă nu găsește nimic, lista este goală, nu null.

Lista are length și forEach și merge cu for...of. Pentru map sau filter, transform-o în tablou cu Array.from(lista) sau [...lista].

Parametri

Parametru	Descriere
`selectorCss`	Un selector CSS, ca text.

Ce returnează

Un NodeList, posibil gol.

Exemple

Exemplul 1: Toate linkurile dintr-un meniu

<nav>
  <a href="/">Acasă</a>
  <a href="/blog/">Blog</a>
  <a href="/contact/">Contact</a>
</nav>

<script>
  const linkuri = document.querySelectorAll("nav a");

  console.log(linkuri.length);
  linkuri.forEach((link) => console.log(link.textContent));
</script>

Rezultat în browser

3
Acasă
Blog
Contact

Exemplul 2: Transformarea în tablou

const adrese = [...document.querySelectorAll("nav a")].map((link) => link.getAttribute("href"));

console.log(adrese.join(", "));