Metoda HTML DOM querySelector()

Przykład

Zmień tekst pierwszego elementu podrzędnego na class="przykład" w elemencie <div>:

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

Więcej przykładów „Wypróbuj sam” poniżej.

Definicja i użycie

Metoda querySelector() zwraca pierwszy element podrzędny, który pasuje do określonego selektora(ów) CSS elementu.

Uwaga: Metoda querySelector() zwraca tylko pierwszy element, który pasuje do określonych selektorów. Aby zwrócić wszystkie dopasowania, użyj zamiast tego metody querySelectorAll() .

Więcej informacji na temat selektorów CSS można znaleźć w naszym samouczku dotyczącym selektorów CSS oraz w podręczniku dotyczącym selektorów CSS .

Obsługa przeglądarki

Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę metodę.

Method
querySelector()	4.0	8.0	3.5	3.2	10.0

Składnia

element.querySelector(CSS selectors)

Wartości parametrów

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. The returned element depends on which element that is first found in the document (See "More Examples"). Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

Szczegóły techniczne

Wersja DOM:	Selektory Obiekt elementu poziomu 1
Wartość zwrotu:	Pierwszy element pasujący do określonych selektorów CSS. Jeśli nie zostaną znalezione żadne dopasowania, zwracana jest wartość null. Zgłasza wyjątek SYNTAX_ERR, jeśli określone selektory są nieprawidłowe.

Więcej przykładów

Przykład

Zmień tekst pierwszego elementu <p> w elemencie <div>:

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

Przykład

Zmień tekst pierwszego elementu <p> na class="przykład" w elemencie <div>:

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

Przykład

Zmień tekst elementu z id="demo" w elemencie <div>:

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

Przykład

Dodaj czerwoną ramkę do pierwszego elementu <a>, który ma atrybut target wewnątrz elementu <div>:

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

Przykład

Ten przykład pokazuje, jak działa wiele selektorów.

Załóżmy, że masz dwa elementy: element <h2> i <h3>.

Poniższy kod doda kolor tła do pierwszego elementu <h2> w <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";

Jednakże, jeśli element <h3> został umieszczony przed elementem <h2> w <div>. Element <h3> to ten, który otrzyma czerwony kolor tła.

<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";