Metoda HTML DOM querySelector ()

Przykłady

Pierwszym elementem dziecko modyfikacja zawartości tekstu id = "demo" elementu <div>:

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

Definicja i Wykorzystanie

querySelector () metoda zwraca dopasowanie elementu określonego selektora CSS elementu pierwszego dziecka.

Uwaga: Metoda querySelector () po prostu zwraca pierwszy element, który pasuje do określonego wyboru. Jeśli chcesz zwrócić wszystkie elementy pasujące, użyj metody querySelectorAll () zamiast.

Aby uzyskać więcej selektorów CSS, można odwiedzić nasze selektorów CSS i nasze selektorów CSS Reference Manual .

Pomoc Browser

Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji metody.

sposób
querySelector ()	4,0	8,0	3,5	3,1	10,0

gramatyka

Element .querySelector (selektorów CSS)

parametr Wartość

parametry	typ	opis
selektory CSS	sznur	Koniecznością. Określ jeden lub więcej pasujących elementów w selektorów CSS. Można używać ich id, klasy, typy, atrybutów, wartości atrybutów, itd., aby wybrać elementy. Dla wielu selektorów oddzielonych przecinkami, aby powrócić pasujący element. Wskazówka: Aby uzyskać więcej selektorów CSS, proszę zobaczyć nasze selektorów CSS Reference Manual .

dane techniczne

Wersja DOM:	Selektory Poziom 1 Element obiektu
Zwraca:	Pierwszym elementem dopasowywania podano selektora CSS. Jeśli nie znaleziono, zwraca null. Jeżeli podasz nieprawidłowy wyjątek selektora SYNTAX_ERR jest wyrzucany.

Więcej przykładów

Przykłady

Modyfikuj element <div> w treści pierwsza <p> elementu:

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

Spróbuj »

Przykłady

Modyfikuj element <div> w pierwszym class = "przykład" zawartości sub-elementu:

var x = document.getElementById ( "myDiv");
x.querySelector ( "przykład"). innerHTML = "Hello World!" .;

Spróbuj »

Przykłady

Modyfikuj element <div> w pierwszym class = "przykład" elementu <p>:

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

Spróbuj »

Przykłady

Dodaj czerwone obramowanie jako element <div> ma elementy pierwszy atrybut target <a>:

var x = document.getElementById ( "myDiv");
. X.querySelector ( "a [cel]") style.border = "10px stałe czerwone";

Spróbuj »

Przykłady

Poniższy przykład pokazuje zastosowanie wielu przełączników.

Załóżmy wybrać dwa selektorów: <h2> i <h3> elementem.

Pierwsze <h2> element dla elementu podany kod <div>, aby dodać kolor tła:

<Div id = "myDiv">
<H2> A h2 elementu </ h2>
<H3> H3 Element </ h3>
</ Div>

var x = document.getElementById ( "myDiv");
x.querySelector ( "H2, H3") style.backgroundColor = "red" .;

Spróbuj »

Jednakże jeżeli element <div> <H3> jest <h2> przed elementem <H3> element będzie ustawiony określić kolor tła.

<Div id = "myDiv">
<H3> H3 Element </ h3>
<H2> A h2 elementu </ h2>
</ Div>

var x = document.getElementById ( "myDiv");
x.querySelector ( "H2, H3") style.backgroundColor = "red" .;

Spróbuj »