HTML DOM Document querySelectorAll() metode

Definition og brug

querySelectorAll() Metoden returnerer alle elementer, der matcher CSS-vælgeren.

querySelectorAll() metoden returnerer NodeList.

hvis vælgeren er ugyldig, så querySelectorAll() Metoden kaster SYNTAX_ERR Undtagelse.

Eksempel

Eksempel 1

Vælg alle elementer med class="example":

document.querySelectorAll(".example");

Prøv det selv

Eksempel 2

Tilføj baggrundsfarve til det første <p> element:

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

Prøv det selv

Eksempel 3

Tilføj baggrundsfarve til det første <p> element med class="example":

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

Prøv det selv

Eksempel 4

Antallet af elementer med class="example":

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

Prøv det selv

Eksempel 5

Indstil baggrundsfarven for alle elementer med class="example":

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

Prøv det selv

Eksempel 6

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

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

Prøv det selv

Eksempel 7

Sæt kantlinjen for alle <a>-elementer, der bruger "target"-egenskaben:

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

Prøv det selv

Eksempel 8

Sæt baggrundsfarven for hver <p>-element, der er en underordnet af <div>-elementet:

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

Prøv det selv

Eksempel 9

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

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

Prøv det selv

syntaks

document.querySelectorAll(CSSselectors)

parametre

parametre beskrivelse
CSSselectors

Obligatorisk. En eller flere CSS-selektorer.

CSS-selektorer vælger HTML-elementer baseret på id, klasse, type, egenskab, egenskabsværdi osv.

For en fuld liste, besøg vores CSS vælger referencemanual.

For flere selektorer, adskil hver selektor med komma (se eksemplet ovenfor).

returneringsværdi

type beskrivelse
objekt

NodeList-objekt, der indeholder elementer, der matcher en CSS-selektor.

Returnerer en tom NodeList-objekt, hvis der ikke findes et match.

Forskellen mellem HTMLCollection og NodeList

NodeList og HTMLcollection meget ligner hinanden.

begge er samlinger af noder (elementer) fra dokumentet, der ligner arrays. Noder kan nås via indeksnumre (indexer). Indekset starter fra 0.

begge har length en egenskab, der returnerer antallet af elementer i listen (samlingen).

HTMLCollection erdokumentelementersæt.

NodeList erDokumentknudesæt af (elementknude, egenskabsknude og tekstknude).

HTMLCollection elementer kan tilgås gennem deres navn, id eller indeksnummer.

NodeList elementer kan kun tilgås gennem deres indeksnummer.

HTMLCollection er altidlivesæt.

f.eks.: Hvis <li> elementet tilføjes til en liste i DOM, ændres listen i HTMLCollection også.

NodeList er normaltStatisksæt.

f.eks.: Hvis <li> elementet tilføjes til en liste i DOM, ændres listen i NodeList ikke.

getElementsByClassName() og getElementsByTagName() metoder returnerer altid en live HTMLCollection.

querySelectorAll() Metoder returnerer en statisk NodeList.

childNodes Egenskaber returnerer en live NodeList.

Browser support

document.querySelectorAll() er en DOM Level 3 (2004) egenskab.

Det understøttes af alle browsere:

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

Relaterede sider

Tutorials:

CSS vælger

CSS vælger referencemanual

JavaScript NodeList tutorial

QuerySelector metode:

Element querySelector() metoden

Element querySelectorAll() metoden

Document querySelector() metoden

Document querySelectorAll() metoden

GetElement metode:

Document getElementById() metoden

Document getElementsByTagName() metoden

Document getElementsByClassName() metoden