HTML DOM Element querySelectorAll() metode

Definition og brug

querySelectorAll() Metoden returnerer en samling af underelementer, der matcher den angivne CSS vælger, som en statisk NodeList objekt.

NodeList

NodeList er en nodekollektion (liste) af type array.

Noder i listen kan tilgås via indeks (index). Indekset starter ved 0.

length egenskaben kan returnere antallet af noder i listen.

Se også:

Referencehåndbog:

classList egenskab

className egenskab

querySelector() metoden

getElementsByTagName() metoden

getElementsByClassName() metoden

HTML DOM Style Object

Lær at bruge:

CSS syntaks

CSS vælger

CSS vælger referencer

Eksempel

Eksempel 1

Sæt baggrundsfarven på det første element med class="example" i <div>:

// Få elementet med id="myDIV" (div) og derefter få alle elementer med class="example" i div
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// Sæt baggrundsfarven på det første element med class="example" (indeks 0) i div
x[0].style.backgroundColor = "red";

Prøv det selv

Tip:Flere eksempler findes nedenfor på siden.

Syntaks

element.querySelectorAll(cssSelectors)

Parametre

Parametre Beskrivelse
cssSelectors

Obligatorisk. Streng. Angiver en eller flere CSS vælgere for at matche elementer.

CSS vælgere bruges til at vælge HTML elementer baseret på id, klasse, type, egenskab, egenskabsværdi osv.

For flere vælgere, adskilles hver vælger med komma.

Tip:For en liste over alle CSS vælgere, se vores CSS vælger referencer.

Tekniske detaljer

Returværdi:

NodeList objektet repræsenterer alle efterkommerelementer, der matcher den angivne CSS vælger.

NodeList er en statisk samling, hvilket betyder, at ændringer i DOM ikke påvirker samlingen.

Bemærk:Hvis den angivne vælger er ugyldig, kastes SYNTAX_ERR undtagelse
DOM version: Selectors Level 1 Document Object

Flere eksempler

Eksempel 2

Få alle <p> elementer inden for <div> og sæt baggrundsfarven på det første <p> element (indeks 0):

// Få elementet med id="myDIV" (div), og hent alle <p>-elementer i div'en
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// Sæt baggrundsfarven på det første <p> element (indeks 0) i div
x[0].style.backgroundColor = "red";

Prøv det selv

Eksempel 3

Få alle <p> elementer med class="example" i <div> og sæt baggrunden på det første <p> element:

// Få elementet med id="myDIV" (div), og hent alle class="example"-elementer med <p>-elementer i div'en
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// Sæt baggrundsfarven for det første <p>-element med class="example" (index 0) i div'en
x[0].style.backgroundColor = "red";

Prøv det selv

Eksempel 4

Find ud af, hvor mange elementer med class="example" der er i <div>-elementet (brug NodeList-objektets length-egenskab):

/* Få elementet med id="myDIV" (div), og hent alle class="example"-elementer i div'en, og returnér antallet af fundne elementer */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Prøv det selv

Eksempel 5

Sæt baggrundsfarven for alle class="example"-elementer i <div>-elementet:

// Få elementet med id="myDIV" (div), og hent alle class="example"-elementer i div'en
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Opret en for-løkke og sæt baggrundsfarven for alle class="example"-elementer i div'en
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Prøv det selv

Eksempel 6

Sæt baggrundsfarven for alle <p>-elementer i <div>-elementet:

// Få elementet med id="myDIV" (div), og hent alle <p>-elementer i div'en
var x = document.getElementById("myDIV").querySelectorAll("p");
// Opret en for-løkke og sæt baggrundsfarven for alle <p>-elementer i div'en
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Prøv det selv

Eksempel 7

Sæt kantstilen for alle <a>-elementer med target-attribut i <div>-elementet:

// Få elementet med id="myDIV" (div), og hent alle <a>-elementer med target-attribut i div'en
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Opret en for-løkke og sæt rammen for alle <a>-elementer med target-attributten i div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

Prøv det selv

Eksempel 8

Sæt baggrundsfarven for alle <h2>, <div> og <span>-elementer i <div>:

// Få elementet med id="myDIV" (div) og få alle <h2>, <div> og <span>-elementer inden i <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Opret en for-løkke og sæt baggrundsfarven for alle <h2>, <div> og <span>-elementer i <div>
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Prøv det selv

Browser support

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter denne metode.

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

Bemærk:Internet Explorer 8 understøtter CSS2 selectors. IE9 og nyere versioner understøtter også CSS3.

Relaterede sider

CSS Tutorial:CSS vælger

CSS Reference Manual:CSS vælger referencer

JavaScript Tutorial:JavaScript HTML DOM Node List

JavaScript Reference Manual:element.querySelector()

HTML DOM Reference Manual:document.querySelectorAll()