HTML DOM querySelector() Method

Exemplu

Modificați textul primului element copil cu class = „exemplu“ , într - un <div> Element:

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

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

Definiție și utilizare

querySelector() metoda returneaza primul element copil care se potrivește cu un CSS specificat selector(s) al unui element.

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.

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ă

element .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 Element Obiect
Întoarcere Valoare:	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

Modificați textul primului <p> elementul într - un <div> Element:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

Încearcă - l singur »

Exemplu

Modificați textul primului <p> elementul cu class = "exemplu" , într - un <div> Element:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

Încearcă - l singur »

Exemplu

Modificarea textului unui element cu id = "demo" , într - un <div> Element:

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

Încearcă - l singur »

Exemplu

Adăugați un chenar roșu primului <a> element care are un atribut țintă în interiorul unui <div> Element:

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

Î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 <div> :

<div id="myDIV">
<h2>A h2 element</h2>
<h3>A h3 element</h3>
</div>

var x = document.getElementById("myDIV");
x.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 <div> . <h3> element este cel care va primi culoarea de fundal roșu.

<div id="myDIV">
<h3>A h3 element</h3>
<h2>A h2 element</h2>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Încearcă - l singur »