HTML DOM querySelector() Method

Exemplu

Ia primul element din document cu class = „exemplu“:

document.querySelector(".example");

Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.

Definiție și utilizare

querySelector() metoda returneaza primul element care se potrivește cu un CSS specificat selector(s) în document.

Notă: querySelector() metoda returneaza doar primul element care se potrivește cu selectorii specificate. Pentru a reveni toate meciurile, utilizați querySelectorAll() metoda in loc.

Dacă selectorul se potrivește cu un ID în documentul care este utilizat de mai multe ori ( De notat că un "id" ar trebui să fie unic în cadrul unei pagini și nu trebuie folosit mai mult de o dată), returnează primul element de potrivire.

Pentru mai multe informații despre CSS selectoare, accesați CSS Căutători Tutorial și noastre CSS Selectori de referință .

Suport pentru browser-

Numerele din tabel specifică prima versiune de browser care acceptă pe deplin metoda.

Metodă
querySelector()	4	8	3.5	3.2	10.0

Sintaxă

document.querySelector( CSS selectors )

Valorile parametrilor

Parametru	Tip	Descriere
CSS selectors	String	Necesar. Specifică unul sau mai multe selectoare CSS pentru a se potrivi elementului. Acestea sunt folosite pentru a selecta elemente HTML pe baza lor id, clase, tipuri, atribute, valori de atribute, etc. Pentru mai multe selectoare, separați fiecare selector cu o virgulă. Elementul returnat depinde de element care este mai întâi găsite în documentul (See "More Examples") A se (See "More Examples") . Sfat: Pentru o listă a tuturor CSS selectoare, uita - te la nostru CSS Căutători de referință .

Detalii tehnice

DOM Versiune:	Nivelul selectori 1 Document Object
Întoarcere Valoare:	Un obiect NodeList, reprezentând primul element care se potrivește cu CSS specificat selector(s) . Dacă nu se găsește nici un meci, null este returnat. O excepție SYNTAX_ERR Aruncări în cazul în care sunt specificate selector(s) este nevalid.

Mai multe exemple

Exemplu

Ia primul <p> element din document:

document.querySelector("p");

Încearcă - l singur »

Exemplu

Ia primul <p> element din document cu class = "exemplu":

document.querySelector("p.example");

Încearcă - l singur »

Exemplu

Modificarea textului unui element cu id = „demo“:

document.querySelector("#demo").innerHTML = "Hello World!";

Încearcă - l singur »

Exemplu

Ia primul <p> element din document în care părintele este un <div> Element.

document.querySelector("div > p");

Încearcă - l singur »

Exemplu

Ia primul <a> element din document , care are o "target" atribut:

document.querySelector("a[target]");

Încearcă - l singur »

Exemplu

Acest exemplu demonstrează modul în care funcționează mai multe selectoare.

Să presupunem că aveți două elemente: un <h2> și <h3> Element.

Codul de mai jos se va adăuga o culoare de fundal pentru primul <h2> element din document:

<h2>A h2 element</h2>
<h3>A h3 element</h3>

document.querySelector("h2, h3").style.backgroundColor = "red";

Încearcă - l singur »

Cu toate acestea, în cazul în care <h3> elementul a fost plasat în fața <h2> element din document. <h3> element este cel care va primi culoarea de fundal roșu.

<h3>A h3 element</h3>
<h2>A h2 element</h2>

document.querySelector("h2, h3").style.backgroundColor = "red";

Încearcă - l singur »