Metoda querySelector() obiektu Document DOM HTML

Definicja i użycie

querySelector() Metoda zwraca elementy dopasowane do selektora CSSPierwszyelementy.

Aby zwrócićWszystkiedopasowania (nie tylko pierwszy dopasowany element), użyj zamiast tego querySelectorAll().

Jeśli selektor jest niewłaściwy, querySelector() i querySelectorAll() zawsze wywołują SYNTAX_ERR Wyjątki.

Przykład

Przykład 1

Uzyskaj pierwszy element <p>:

document.querySelector("p");

Spróbuj sam

Przykład 2

Uzyskaj pierwszy element o klasie "example":

document.querySelector(".example");

Spróbuj sam

Przykład 3

Uzyskaj pierwszy element <p> o klasie "example":

document.querySelector("p.example");

Spróbuj sam

Przykład 4

Zmień tekst elementu o id="demo":

document.querySelector("#demo").innerHTML = "Hello World!";

Spróbuj sam

Przykład 5

Wybierz pierwszy element <p>, który jest potomkiem elementu <div>:

document.querySelector("div > p");

Spróbuj sam

Przykład 6

Wybierz pierwszy element <a> posiadający atrybut "target":

document.querySelector("a[target]");

Spróbuj sam

Przykład 7

Wybierz pierwszy <h3> lub pierwszy <h4>:

<h3>Element h3</h3>
<h4>Element h4</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";

Spróbuj sam

Przykład 8

Wybierz pierwszy <h3> lub pierwszy <h4>:

<h4>Element h4</h4>
<h3>Element h3</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";

Spróbuj sam

Gramatyka

document.querySelector(cssSelectors)

Parametr

Parametr Opis
cssSelectors

Wymagane. Jedna lub kilka selektorów CSS.

Selektory CSS wybierają elementy HTML na podstawie id, klasy, typu, atrybutów, wartości atrybutów itp.

Aby uzyskać pełną listę, odwiedź naszą Przeglądarka selektorów CSS.

Dla wielu selektorów, oddzielaj je przecinkami (zobacz przykład powyżej na stronie).

Zwracana wartość

Typ Opis
Obiekt

NodeList zawierający pierwszy element, który pasuje do selektora CSS.

Zwraca null, jeśli nie znaleziono dopasowania.

Różnica między HTMLCollection a NodeList

NodeList i HTMLcollection bardzo podobne.

Oboje są zbiorami podobnymi do tablicy węzłów (elementów) wyodrębnionych z dokumentu. Można uzyskać dostęp do węzłów za pomocą numeru indeksu (indeksu). Indeks zaczyna się od 0.

Oboje mają length Atrybut, który zwraca liczbę elementów (zbiór) w liście.

HTMLCollection jestElement dokumentuzbiór.

NodeList jestWęzeł dokumentuzbiór (węzły elementowe, węzły atrybutowe i węzły tekstowe).

Elementy HTMLCollection można uzyskać poprzez ich nazwę, id lub numer indeksu.

Elementy NodeList można uzyskać tylko przez ich numer indeksu.

HTMLCollection zawsze jestrzeczywistyzbiór.

Na przykład: jeśli dodać element <li> do listy w DOM, lista w HTMLCollection również się zmieni.

NodeList jest zazwyczajStatycznyzbiór.

Na przykład: jeśli dodać element <li> do listy w DOM, lista w NodeList nie zmieni się.

getElementsByClassName() i getElementsByTagName() Wszystkie metody zwracają rzeczywisty HTMLCollection.

querySelectorAll() Metoda zwraca statyczny NodeList.

childNodes Właściwość zwraca rzeczywisty NodeList.

Wsparcie przeglądarki

document.querySelector() Jest to cecha DOM Level 1 (1998).

Obsługiwane przez wszystkie przeglądarki:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Wsparcie 9-11 Wsparcie Wsparcie Wsparcie Wsparcie

Strony związane

Kurs:

Selektory CSS

Przeglądarka selektorów CSS

Przeglądarka dokumentów NodeList DOM HTML

Metoda QuerySelector:

Metoda querySelector():

Metoda querySelectorAll():

Metoda GetElement:

Metoda getElementById()

Metoda getElementsByTagName()

Metoda getElementsByClassName()