HTML DOM querySelector() Method

Przykład

Zmień tekst pierwszego elementu podrzędnego z class = „przykład” w <div> element:

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

Więcej "Try it Yourself" przykłady poniżej.

Definicja i Wykorzystanie

querySelector() metoda zwraca pierwszy element podrzędny, który odpowiada określonej CSS selector(s) elementu.

Uwaga: querySelector() metoda zwraca tylko pierwszy element, który pasuje do wskazanej selektorów. Aby przywrócić wszystkie mecze, użyj querySelectorAll() metodę zamiast.

Aby uzyskać więcej informacji na temat CSS selektorów, odwiedź naszą CSS Selectors samouczek i nasze CSS Selectors Reference .

Wsparcie przeglądarka

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

metoda
querySelector()	4.0	8.0	3.5	3.2	10,0

Składnia

element .querySelector( CSS selectors )

wartości parametrów

Parametr	Rodzaj	Opis
CSS selectors	String	Wymagany. Określa jeden lub więcej selektorów CSS dopasować element. Są one wykorzystywane, aby wybrać elementy HTML na podstawie dowodu osobistego, klas, typów atrybutów, wartości atrybutów, etc. Dla wielu selektorów, selektor oddzielić przecinkami. Zwracany elementu zależy od elementu, który jest najpierw znaleźć w dokumencie (See "More Examples") . Wskazówka: Aby uzyskać listę wszystkich selektorów CSS, spojrzeć na nasz CSS selektory Reference .

Szczegóły techniczne

DOM wersja:	Selektory Poziom 1 element Przedmiot
Zwracana wartość:	Pierwszym elementem, który pasuje do określonego CSS selector(s) . Jeżeli nie znaleziono dopasowania, zwracana jest wartość null. Zgłasza wyjątek SYNTAX_ERR jeśli określony selector(s) jest nieprawidłowe.

Więcej przykładów

Przykład

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

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

Spróbuj sam "

Przykład

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

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

Spróbuj sam "

Przykład

Zmienić tekst elementu o id = "demo" w <div> element:

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

Spróbuj sam "

Przykład

Dodaj czerwone obramowanie do pierwszego <a> elementu, który ma atrybut target wewnątrz <div> element:

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

Spróbuj sam "

Przykład

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

Załóżmy, że masz dwóch elementów: <h2> i <h3> element.

Poniższy kod doda koloru tła na pierwszy <h2> elementu <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";

Spróbuj sam "

Jednakże, jeżeli <h3> element został umieszczony przed <h2> elementu <div> . <h3> elementem jest jedno z nich dostanie 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";

Spróbuj sam "