HTML DOM Element querySelectorAll() metoden

Definition och användning

querySelectorAll() Metoden returnerar en samling av underelement som matchar den angivna CSS-selektorn, som en statisk NodeList-objekt.

NodeList

NodeList är en nodecollection (lista) som liknar en array.

Noder i listan kan nås via index (index). Index börjar vid 0.

length-attributet kan returnera antalet noder i listan.

Se också:

Referenshandbok:

classList-attribut

className-attribut

querySelector() metod

getElementsByTagName() metod

getElementsByClassName() metod

HTML DOM Style-objekt

Tutorial:

CSS syntax

CSS selektorer

CSS selektorer referenshandbok

Exempel

Exempel 1

Ställ in bakgrundsfärgen för det första elementet med class="example" inom <div>-elementet:

// Hämta elementet med id="myDIV" (div) och sedan hämta alla element med class="example" inom div
var x = document.getElementById("myDIV").querySelectorAll(".example"); 
// Ställ in bakgrundsfärgen för det första elementet med class="example" (index 0) inom div
x[0].style.backgroundColor = "red";

Prova själv

Tips:Mer exempel finns längre ner på sidan.

Syntaks

element.querySelectorAll(cssSelectors)

Parametrar

Parametrar Beskrivning
cssSelectors

Obligatorisk. Sträng. Anger en eller flera CSS-selektorer för att matcha element.

CSS-selektorer används för att välja HTML-element baserat på id, klass, typ, egenskaper, egenskapsvärden och så vidare.

För flera selektorer, separera varje selektor med komma.

Tips:För en lista över alla CSS-selektorer, se vår CSS selektorer referenshandbok.

Tekniska detaljer

Returvärde:

NodeList-objektet representerar alla efterkommande element som matchar den angivna CSS-selektorn.

NodeList är en statisk samling, vilket innebär att förändringar i DOM inte påverkar samlingen.

Observera:Om den angivna selektorn är ogiltig, kastas en SYNTAX_ERR-undantag
DOM-version: Document Object Selectors Nivå 1

Mer exempel

Exempel 2

Få alla <p> element inom <div> elementet och ställ in bakgrundsfärgen för det första <p>-elementet (index 0):

// Hämta elementet med id="myDIV" (div) och sedan få alla p element inom div
var x = document.getElementById("myDIV").querySelectorAll("p"); 
// Ställ in bakgrundsfärgen för det första <p>-elementet (index 0) inom div
x[0].style.backgroundColor = "red";

Prova själv

Exempel 3

Få alla <p> element inom <div> med class="example" och ställ in bakgrundsfärgen för det första <p>-elementet:

// Hämta elementet med id="myDIV" (div) och sedan få alla p element med class="example" inom div
var x = document.getElementById("myDIV").querySelectorAll("p.example"); 
// Ställ in bakgrundsfärgen för det första <p> elementet med class="example" inom div (index 0)
x[0].style.backgroundColor = "red";

Prova själv

Exempel 4

Finna hur många element med class="example" som finns inom <div> elementet (använd NodeList-objektets length-egenskap):

/* Hämta elementet med id="myDIV" (div) och sedan få alla p element med class="example" inom div, returnera antalet hittade element */
var x = document.getElementById("myDIV").querySelectorAll(".example").length;

Prova själv

Exempel 5

Ställ in bakgrundsfärgen för alla element med class="example" inom <div> elementet:

// Hämta elementet med id="myDIV" (div) och sedan få alla element med class="example" inom div
var x = document.getElementById("myDIV").querySelectorAll(".example");
// Skapa en for-loop och ställ in bakgrundsfärgen för alla element med class="example" inom div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Prova själv

Exempel 6

Ställ in bakgrundsfärgen för alla <p> element inom <div> elementet:

// Hämta elementet med id="myDIV" (div) och sedan få alla p element inom div
var x = document.getElementById("myDIV").querySelectorAll("p");
// Skapa en for-loop och ställ in bakgrundsfärgen för alla <p> element inom div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Prova själv

Exempel 7

Ställ in ramstilen för alla <a> element med target-egenskapen inom <div> elementet:

// Hämta elementet med id="myDIV" (div) och sedan få alla <a> element med "target"-egenskapen inom div
var x = document.getElementById("myDIV").querySelectorAll("a[target]");
// Skapa en for-loop och ställ in ramen för alla <a>-element med egenskapen target i div
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.border = "10px solid red";
}

Prova själv

Exempel 8

Ställ in bakgrundsfärgen för alla <h2>, <div> och <span>-element i <div>:

// Hämta elementet med id="myDIV" (div) och få alla <h2>, <div> och <span>-element inom <div>
var x = document.getElementById("myDIV").querySelectorAll("h2, div, span");
// Skapa en for-loop och ställ in bakgrundsfärgen för alla <h2>, <div> och <span>-element i <div>
var i;
for (i = 0; i < x.length; i++) {
  x[i].style.backgroundColor = "red";
}

Prova själv

Webbläsarstöd

Numreringen i tabellen anger den första webbläsarversionen som helt stöder denna metod.

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

Observera:Internet Explorer 8 stöder CSS2-selektorer. IE9 och högre versioner stöder också CSS3.

Relaterade sidor

CSS-lär纲:CSS selektorer

CSS-referenshandbok:CSS selektorer referenshandbok

JavaScript-lär纲:JavaScript HTML DOM Node List

JavaScript-referenshandbok:element.querySelector()

HTML DOM-referenshandbok:document.querySelectorAll()