Metoda querySelector() Elementu DOM HTML

Definicja i użycie

querySelector() Metoda zwraca pierwszy potomek elementu dopasowany do podanego selektora CSS.

Uwaga:

querySelector() Metoda zwraca tylko pierwszy element dopasowany do podanego selektora. Aby zwrócić wszystkie dopasowania, użyj zamiast tego Metoda querySelectorAll().

Zobacz również:

Podręcznik referencyjny:

Atrybut classList

Atrybut className

Metoda querySelectorAll()

Metoda getElementsByTagName()

Metoda getElementsByClassName()

Obiekt Style HTML DOM

Tutorial:

Gramatyka CSS

Wybieracze CSS

Podręcznik wybieraczy CSS

Przykład

Przykład 1

Zmień tekst pierwszego potomka elementu <div> o klasie="example":

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

Spróbuj sam

Więcej przykładów znajduje się na dole strony.

Gramatyka

element.querySelector(CSSselectors)

Parametry

Parametry Opis
CSSselectors

Wymagane. String. Określa jeden lub kilka selektorów CSS do dopasowania elementów.

Selektory CSS służą do wyboru elementów HTML na podstawie id, klasy, typu, atrybutów, wartości atrybutów itp.

Dla wielu selektorów, oddzielaj je przecinkami.

Zwracany element zależy od pierwszego elementu znalezionego w dokumencie (zobacz poniżej "Więcej przykładów").

Wskazówka:Aby uzyskać pełną listę selektorów CSS, zobacz nasz Podręcznik wybieraczy CSS.

Szczegóły techniczne

Zwracana wartość:

Dopasowuje pierwszy element spełniający podany selektor CSS.

Jeśli nie znaleziono dopasowania, zwraca null.

Jeśli podany selektor jest niewłaściwy, zostanie rzucony wyjątek SYNTAX_ERR.
Wersja DOM: Obiekt Elementu Poziomu 1 Selectors

Więcej przykładów

Przykład 2

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

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

Spróbuj sam

Przykład 3

Zmień tekst pierwszego elementu <p> o klasie="example":

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

Spróbuj sam

Przykład 4

Zmień tekst elementu <div> o id="demo":

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

Spróbuj sam

Przykład 5

Dodaj czerwony obramowanie do pierwszego elementu <a> wewnątrz elementu <div> z ustawioną cechą target:

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

Spróbuj sam

Przykład 6

Ten przykład pokazuje, jak działają wielokrotne selektory.

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

Poniższy kod doda kolor tła do pierwszego elementu <h2> w <div>:

<div id="myDIV">
  <h2>Element h2</h2>
  <h3>Element h3</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Spróbuj sam

Przykład 7

Ale jeśli element <h3> w <div> umieszczony jest przed elementem <h2> element <h3> otrzyma czerwony kolor tła.

<div id="myDIV">
  <h3>Element h3</h3>
  <h2>Element h2</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Spróbuj sam

Wsparcie przeglądarek

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 8.0 3.5 3.2 10.0

Strony związane

Podręcznik CSS:Wybieracze CSS

Podręcznik CSS Referencja:Podręcznik wybieraczy CSS

Podręcznik JavaScript:JavaScript HTML DOM Node List

Podręcznik JavaScript Referencja:document.querySelector()

Podręcznik JavaScript Referencja:element.querySelectorAll()

Przeglądarka HTML DOM Referencja:document.querySelectorAll()