`document.querySelector` în JavaScript

Pagina web (DOM) Toate browserele moderne

Găsește primul element din pagină care se potrivește cu un selector CSS.

Sintaxă

document.querySelector(selectorCss)

Ce face `document.querySelector`

querySelector caută în pagină folosind aceleași selectoare ca în CSS: #id, .clasa, eticheta, [atribut] sau combinații ale lor. Returnează primul element găsit sau null.

Poți căuta și în interiorul unui element: meniu.querySelector("a") caută doar în meniu.

Funcționează doar în browser. Exemplele de mai jos presupun HTML-ul din primul exemplu.

Parametri

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

Ce returnează

Primul element găsit sau null.

Exemple

Exemplul 1: Căutarea după id, clasă și etichetă

<h1 id="titlu">Bun venit</h1>
<p class="intro">Primul paragraf</p>
<p class="intro">Al doilea paragraf</p>

<script>
  console.log(document.querySelector("#titlu").textContent);
  console.log(document.querySelector(".intro").textContent);
  console.log(document.querySelector("footer"));
</script>

Rezultat în browser

Bun venit
Primul paragraf
null

Exemplul 2: Verificarea înainte de folosire

const buton = document.querySelector(".buton-abonare");

if (buton) {
  buton.textContent = "Abonează-te acum";
} else {
  console.log("Butonul nu există pe această pagină.");
}