HTML DOM Element querySelectorAll() metodi

Määritelmä ja käyttö

querySelectorAll() Menetelmä palauttaa määritetyn CSS-valitsimen vastaavien elementtien lapsien joukon staattisena NodeList-objektina.

NodeList

NodeList on tyyppinen solujen joukko (lista).

Listan soluihin voidaan päästä indeksin (alaviivan) kautta. Indeksointi alkaa 0:sta.

length -ominaisuus palauttaa listan solujen määrän.

Katso myös:

Viitteet:

classList -ominaisuus

className -ominaisuus

querySelector() -menetelmä

getElementsByTagName() -menetelmä

getElementsByClassName() -menetelmä

HTML DOM Style-objekti

Oppaita:

CSS-kieli

CSS-valitsimet

CSS-valitsimien viittomakirja

Esimerkki

Esimerkki 1

Aseta <div> -elementin class="example" -luokan ensimmäisen elementin tausta:

// Hanki id="myDIV" -elementti (div) ja sitten hanki kaikki div-elementin sisällä class="example" -luokan elementit
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// Aseta div-elementin ensimmäisen class="example" (indeksi 0) elementin taustaväri
x[0].style.backgroundColor = "red";

Kokeile itse

Vinkki:Lisää esimerkkejä sivun alalta.

Syntaksi

element.querySelectorAll(cssSelectors)

Parametrit

Parametrit Kuvaus
cssSelectors

Välttämätön. Merkkijono. Määrittää yhden tai useamman CSS-valitsimen elementin sopivuuden määrittämiseksi.

CSS-valitsimet käytetään HTML-elementtien valitsemiseen id:n, luokan, tyypin, ominaisuuksien ja niiden arvojen perusteella.

Useita valitsimia erotetaan pilkulla.

Vinkki:Kaikkien CSS-valitsinten luettelo löytyy CSS-valitsimien viittomakirja.

Tekninen yksityiskohta

Palautusarvo:

NodeList-objekti edustaa kaikki nykyiset elementit, jotka vastaavat määriteltyä CSS-valitsinta.

NodeList on staattinen joukko, mikä tarkoittaa, että DOM:n muutokset eivät vaikuta joukkoon.

Huomioitavaa:Jos määritetty valitsin on virheellinen, heittää SYNTAX_ERR-poikkeuksen
DOM-versio: Valitsimet Taso 1 Dokumenttiobjekti

Lisää esimerkkejä

Esimerkki 2

Hanki kaikki <div> -elementin sisällä olevat <p> -elementit ja aseta ensimmäisen <p> -elementin (indeksi 0) taustaväri:

// Hae elementtiä, jolla on id="myDIV" (div), ja sitten hae div:n kaikki p-elementit
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// Aseta div-elementin ensimmäisen <p> -elementin (indeksi 0) taustaväri
x[0].style.backgroundColor = "red";

Kokeile itse

Esimerkki 3

Hanki kaikki <div> -elementin class="example" -luokan <p> -elementit ja aseta ensimmäisen <p> -elementin tausta:

// Hae elementtiä, jolla on id="myDIV" (div), ja sitten hae div:n kaikki class="example"-p-elementit
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// Aseta div:n ensimmäisen class="example"-p-elementin (indeksi 0) taustaväri
x[0].style.backgroundColor = "red";

Kokeile itse

Esimerkki 4

Etsi, kuinka monta elementtiä <div>-elementissä on class="example" (käytä NodeList-objektin length-ominaisuutta):

/* Hae elementtiä, jolla on id="myDIV" (div), ja sitten hae div:n kaikki class="example"-p-elementit, palauta löydettyjen elementtien määrä */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Kokeile itse

Esimerkki 5

Aseta <div>-elementin class="example"-kaikkien elementtien taustaväri:

// Hae elementtiä, jolla on id="myDIV" (div), ja sitten hae div:n kaikki class="example"-elementit
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Luo for-silmukka ja aseta div:n kaikki class="example"-elementtien taustaväri
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Kokeile itse

Esimerkki 6

Aseta <div>-elementin kaikki <p>-elementtien taustaväri:

// Hae elementtiä, jolla on id="myDIV" (div), ja sitten hae div:n kaikki p-elementit
var x = document.getElementById("myDIV").querySelectorAll("p");
// Luo for-silmukka ja aseta div:n kaikki p-elementtien taustaväri
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Kokeile itse

Esimerkki 7

Aseta <div>-elementin kaikki <a>-elementtien, joilla on target-ominaisuus, reunaväri

// Hae elementtiä, jolla on id="myDIV" (div), ja sitten hae div:n kaikki <a>-elementit, joilla on "target"-ominaisuus
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Luo for-silmukka ja aseta kaikki div:ssä olevat tageilla targer ominaisuuden <a>-elementtien reunat
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

Kokeile itse

Esimerkki 8

Aseta kaikki <div>-elementtien <h2>, <div> ja <span>-elementtien taustaväri:

// Hae id="myDIV" -elementti (div) ja hae kaikki <div>-elementin sisällä olevat <h2>, <div> ja <span>-elementit
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Luo for-silmukka ja aseta kaikki <div>-elementtien <h2>, <div> ja <span>-elementtien taustaväri
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Kokeile itse

Selaimen tuki

Taulukossa olevat numerot mainitsevat ensimmäisen selaimen version, joka tukee tätä menetelmää täysin.

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

Huomioitavaa:Internet Explorer 8 tukee CSS2-valitsijoita. IE9 ja uudet versiot tukevat myös CSS3.

Aiheeseen liittyvät sivut

CSS-opas:CSS-valitsimet

CSS -viittausopas:CSS-valitsimien viittomakirja

JavaScript-opas:JavaScript HTML DOM Node List

JavaScript -viittausopas:element.querySelector()

HTML DOM -viittausopas:document.querySelectorAll()