HTML DOM Document querySelector() -menetelmä

Määritelmä ja käyttö

querySelector() Metodi palauttaa CSS-valitsimen kanssa matchaavatEnsimmäinenelementit.

Jos haluat palauttaaKaikkimatchaukset (ei pelkästään ensimmäinen matchaus), käytä querySelectorAll()。

Jos valitsin on epäsyntaktinen, querySelector() ja querySelectorAll() tai SYNTAX_ERR Poikkeukset.

Esimerkki

Esimerkki 1

Hae ensimmäinen <p> elementti:

document.querySelector("p");

Kokeile itse

Esimerkki 2

Hae ensimmäinen elementti, jolla on class="example":

document.querySelector(".example");

Kokeile itse

Esimerkki 3

Hae ensimmäinen <p> elementti, jolla on class="example":

document.querySelector("p.example");

Kokeile itse

Esimerkki 4

Muuta id="demo" elementin tekstiä:

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

Kokeile itse

Esimerkki 5

Valitse ensimmäinen <p> elementti, jonka isäntäelementti on <div> elementti:

document.querySelector("div > p");

Kokeile itse

Esimerkki 6

Valitse ensimmäinen <a> elementti, jolla on "target" ominaisuus:

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

Kokeile itse

Esimerkki 7

Valitse ensimmäinen <h3> tai ensimmäinen <h4>:

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

Kokeile itse

Esimerkki 8

Valitse ensimmäinen <h3> tai ensimmäinen <h4>:

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

Kokeile itse

Syntaksi

document.querySelector(cssSelectors)

Parametri

Parametri Kuvaus
cssSelectors

Välttämätön. Yksi tai useita CSS-valitsimiä.

CSS-valitsimet valitsevat HTML-elementit id:n, luokan, tyypin, ominaisuuksien ja niiden arvojen perusteella.

Täydellinen lista löytyy CSS-valitsinreferenssikirja.

Useita valitsimia varten erottelkaa valitsimet pilkulla (katso esimerkki sivun yläosasta).

Palautusarvo

Tyyppi Kuvaus
Objekti

NodeList, joka sisältää ensimmäisen CSS-valitsimen kanssa matchaavan elementin.

Jos matchaus ei löydy, palautetaan null.

HTMLCollection ja NodeList:n ero

NodeList ja HTMLcollection Erittäin samanlaisia.

Molemmat ovat dokumentista saatujen solmujen (elementtien) samankaltaisia taulukkolistoja (luetteloja), jotka voidaan saavuttaa indeksin avulla. Indeksi alkaa 0:sta.

Molemmat length Ominaisuus, joka palauttaa luettelon (kokoelman) elementtien määrästä.

HTMLCollection onDokumentin elementtikokoelma.

NodeList onDokumentin solmukohteiden kokoelma (elementti-nodit, ominaisuus-nodit ja tekstinodetit).

HTMLCollection-kohteet voidaan saavuttaa niiden nimellä, id:llä tai indeksillä.

NodeList-kohteet voidaan saavuttaa vain niiden indeksin avulla.

HTMLCollection on ainaReaaliaikainenkokoelma.

Esimerkiksi: Jos lisätään <li> -elementti DOMiin sisältämään luetteloa, HTMLCollectionin luettelo muuttuu.

NodeList on yleensäStatiikkakokoelma.

Esimerkiksi: Jos lisätään <li> -elementti DOMiin sisältämään luetteloa, NodeListin luettelo ei muutu.

getElementsByClassName() ja getElementsByTagName() Kaikki menetelmät palauttavat reaaliaikaisen HTMLCollection.

querySelectorAll() Menetelmä palauttaa staattisen NodeList.

childNodes Ominaisuus palauttaa reaaliaikaisen NodeList.

Selaimen tuki

document.querySelector() Se on DOM Level 1 (1998) -ominaisuus.

Kaikki selaimet tukevat sitä:

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

Liittyvät sivut

Oppaat:

CSS-valitsimet

CSS-valitsinreferenssikirja

HTML DOM NodeList -referenssikirja

QuerySelector-menetelmä:

querySelector() -menetelmä

querySelectorAll() -menetelmä

GetElement-menetelmä:

getElementById() -menetelmä

getElementsByTagName() -menetelmä

getElementsByClassName() -menetelmä