HTML DOM Document querySelectorAll() metod

Definition och användning

querySelectorAll() Metoden returnerar alla element som matchar CSS-väljaren.

querySelectorAll() Metoden returnerar NodeList.

om väljaren är ogiltig: querySelectorAll() Metoden kastar SYNTAX_ERR Undantag.

Exempel

Exempel 1

Välj alla element med class="example":

document.querySelectorAll(".example");

Prova själv

Exempel 2

Lägg till bakgrundsfärg till det första <p> elementet:

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

Prova själv

Exempel 3

Lägg till bakgrundsfärg till det första <p> elementet med class="example":

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

Prova själv

Exempel 4

Antalet element med class="example":

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

Prova själv

Exempel 5

Ställ in bakgrundsfärgen för alla element med class="example":

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

Prova själv

Exempel 6

Ställ in bakgrundsfärgen för alla <p>-element:

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

Prova själv

Exempel 7

Ställ in ramen för alla <a>-element som använder "target"-egenskapen:

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

Prova själv

Exempel 8

Ställ in bakgrundsfärgen för varje <p>-element som är ett barn till <div>-elementet:

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

Prova själv

Exempel 9

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

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

Prova själv

syntaks

document.querySelectorAll(CSSselectors)

parametrar

parametrar beskrivning
CSSselectors

obligatorisk. En eller flera CSS-väljare.

CSS-väljare väljer HTML-element baserat på id, klass, typ, egenskap, egenskapsvärde och så vidare.

För en fullständig lista, besök vår CSS-väljare referenshandbok.

För flera väljare, separera varje väljare med komma (se exempel ovan).

returnerar värde

typ beskrivning
objekt

NodeList-objekt som innehåller element som matchar CSS-väljare.

Om ingen match hittas, returneras en tom NodeList-objekt.

Skillnaden mellan HTMLCollection och NodeList

NodeList och HTMLcollection mycket lika.

båda är samlingar av noder (element) som hämtats från dokumentet, liknande en array. Noder kan nås via indexnummer (underindex). Index börjar från 0.

båda har length egenskap, som returnerar antalet element i listan (samlingen).

HTMLCollection ärdokumentelementsamlning.

NodeList ärDokumentnodsamlning av (elementnod, egenskapsnod och textnod).

HTMLCollection-element kan nås genom deras namn, id eller indexnummer.

NodeList-element kan endast nås genom deras indexnummer.

HTMLCollection är alltidrealtidsamlning.

Exempel: Om <li>-elementet läggs till i en lista i DOM, ändras också listan i HTMLCollection.

NodeList är vanligtvisStatisksamlning.

Exempel: Om <li>-elementet läggs till i en lista i DOM, ändras inte listan i NodeList.

getElementsByClassName() och getElementsByTagName() Metoder returnerar alltid en realtids HTMLCollection.

querySelectorAll() Metoden returnerar en statisk NodeList.

childNodes Egenskapen returnerar en realtids NodeList.

Webbläsarstöd

document.querySelectorAll() Det är en DOM Level 3 (2004)-funktion.

Det stöds av alla webbläsare:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd 9-11 Stöd Stöd Stöd Stöd

Relaterade sidor

Lärord:

CSS-väljare

CSS-väljare referenshandbok

JavaScript Node List-lärord

QuerySelector-metod:

Element querySelector() metod

Element querySelectorAll() metod

Document querySelector() metod

Document querySelectorAll() metod

GetElement-metod:

Document getElementById() metod

Document getElementsByTagName() metod

Document getElementsByClassName() metod