HTML DOM Document querySelectorAll() -menetelmä

Määrittely ja käyttö

querySelectorAll() Metodi palauttaa kaikki CSS-valitsimen kanssa vastaavat elementit.

querySelectorAll() Metodi palauttaa NodeList.

Jos valitsin on epäsyntynyt, niin querySelectorAll() Metodi heittää SYNTAX_ERR Poikkeus.

Esimerkki

Esimerkki 1

Valitse kaikki class="example"-sisältämät elementit:

document.querySelectorAll(".example");

Kokeile itse

Esimerkki 2

Lisää taustaväri ensimmäiselle <p>-elementille:

const nodeList = document.querySelectorAll("p");
nodeList[0].style.backgroundColor = "red";

Kokeile itse

Esimerkki 3

Lisää taustaväri ensimmäiselle class="example"-sisältämälle <p>-elementille:

const nodeList = document.querySelectorAll("p.example");
nodeList[0].style.backgroundColor = "red";

Kokeile itse

Esimerkki 4

class="example"-elementtien määrä:

let numb = document.querySelectorAll(".example").length;

Kokeile itse

Esimerkki 5

Aseta kaikki class="example"-elementtien taustaväri:

const nodeList = document.querySelectorAll(".example");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Kokeile itse

Esimerkki 6

Aseta kaikkien <p>-elementtien taustaväri:

let nodeList = document.querySelectorAll("p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Kokeile itse

Esimerkki 7

Aseta kaikkien "target"-ominaisuuden käyttävien <a>-elementtien reunaviiva:

const nodeList = document.querySelectorAll("a[target]");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.border = "10px solid red";
}

Kokeile itse

Esimerkki 8

Aseta kaikkien <p>-elementtien taustaväri, joiden vanhempi on <div>-elementti:

const nodeList = document.querySelectorAll("div > p");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Kokeile itse

Esimerkki 9

Aseta kaikki <h3>、<div> ja <span>-elementtien taustaväri:

const nodeList = document.querySelectorAll("h3, div, span");
for (let i = 0; i < nodeList.length; i++) {
  nodeList[i].style.backgroundColor = "red";
}

Kokeile itse

Syntaksi

document.querySelectorAll(CSSselectors)

Parametrit

Parametrit Kuvaus
CSSselectors

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

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

Täydellinen luettelo löytyy CSS-valitsimet referenssikirja.

Useita valitsimia varten erottelkaa valitsimet pilkulla (katso yllä oleva esimerkki).

Palautusarvo

Tyyppi Kuvaus
Objekti

NodeList-objekti, joka sisältää CSS-valitsimen mukaiset elementit.

Jos matchausta ei löydy, palautetaan tyhjä NodeList-objekti.

HTMLCollection ja NodeList:n erot

NodeList ja HTMLcollection Erittäin samanlaisia.

Molemmat ovat dokumentista poimittujen solujen (elementtien) vastaavien taulukkomaisen kokoelman (luettelon). Soluja voidaan saavuttaa indeksin (indeksin) avulla. Indeksi alkaa 0:sta.

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

HTMLCollection ondokumenttielementtikokoelma.

NodeList onDokumentin solmuelementtiä, ominaisuusnodettia ja tekstitietoja).

HTMLCollection-elementit voidaan tarkastella niiden nimellä, id:llä tai indeksillä.

NodeList-elementit voidaan tarkastella vain niiden indeksin avulla.

HTMLCollection on ainaReaaliaikainenkokoelma.

Esimerkiksi: Jos lisätään <li>-elementti DOM:iin listaan, HTMLCollectionin lista muuttuu.

NodeList on yleensäStatiikkakokoelma.

Esimerkiksi: Jos lisätään <li>-elementti DOM:iin listaan, NodeListin lista ei muutu.

getElementsByClassName() ja getElementsByTagName() Metodi palauttaa aina reaaliaikaisen HTMLCollection.

querySelectorAll() Metodi palauttaa staattisen NodeList.

childNodes Ominaisuus palauttaa reaaliaikaisen NodeList.

Selaimen tuki

document.querySelectorAll() Se on DOM Level 3 (2004) -ominaisuus.

Kaikki selaimet tukevat sitä:

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

Tiedostoon liittyvät sivut

Opas:

CSS-valitsimet

CSS-valitsimet referenssikirja

JavaScript Node List -opas

QuerySelector-menetelmä:

Element querySelector() -menetelmä

Element querySelectorAll() -menetelmä

Document querySelector() -menetelmä

Document querySelectorAll() -menetelmä

GetElement-menetelmä:

Document getElementById() -menetelmä

Document getElementsByTagName() -menetelmä

Document getElementsByClassName() -menetelmä