HTML DOM Document querySelector() metode

Defininition og brug

querySelector() Metoden returnerer elementer, der matcher CSS-vælgerenFørsteelementer.

For at returnereAllematchninger (ikke kun den første matchning), brug i stedet querySelectorAll().

Hvis vælgeren er ugyldig querySelector() og querySelectorAll() vil kaste SYNTAX_ERR Undtagelse.

Eksempel

Eksempel 1

Få det første <p>-element:

document.querySelector("p");

Prøv det selv

Eksempel 2

Få det første element med class="example":

document.querySelector(".example");

Prøv det selv

Eksempel 3

Få det første <p>-element med class="example":

document.querySelector("p.example");

Prøv det selv

Eksempel 4

Ændr teksten på elementet med id="demo":

document.querySelector("#demo").innerHTML = "Hello World!";

Prøv det selv

Eksempel 5

Vælg det første <p>-element, hvis forældreelement er <div>-elementet:

document.querySelector("div > p");

Prøv det selv

Eksempel 6

Vælg det første <a>-element med "target"-egenskab:

document.querySelector("a[target]");

Prøv det selv

Eksempel 7

Vælg den første <h3> eller den første <h4>:

<h3>Et h3-element</h3>
<h4>Et h4-element</h4>
document.querySelector("h3, h4").style.backgroundColor = "red";

Prøv det selv

Eksempel 8

Vælg den første <h3> eller den første <h4>:

<h4>Et h4-element</h4>
<h3>Et h3-element</h3>
document.querySelector("h3, h4").style.backgroundColor = "red";

Prøv det selv

Syntaks

document.querySelector(cssSelectors)

Parameter

Parameter Beskrivelse
cssSelectors

Obligatorisk. En eller flere CSS-vælger.

CSS-vælger 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 vælger, adskil hver vælger med komma (se eksemplet øverst på siden).

Returværdi

Type Beskrivelse
Objekt

NodeList, der indeholder den første element, der matcher CSS-vælgeren.

Returnerer null, hvis der ikke findes et match.

Forskel mellem HTMLCollection og NodeList

NodeList og HTMLcollection Meget ligner

Begge er samlinger af noder (elementer) fra dokumentet, der er lignende arrays (lister). Noder kan tilgås gennem indeksnumre (indekser). Indekset starter fra 0.

Begge har length Egenskab, der returnerer antallet af elementer (sæt) i listen (saml).

HTMLCollection erDokumentelements samling.

NodeList erDokumentknudes samling (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 samling.

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

NodeList er typiskStatisks samling.

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

getElementsByClassName() og getElementsByTagName() Metoderne returnerer alle en live HTMLCollection.

querySelectorAll() Metoden returnerer en statisk NodeList.

childNodes Egenskaben returnerer en live NodeList.

Browserv understøttelse

document.querySelector() er DOM Level 1 (1998) 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

Undervisning:

CSS vælger

CSS vælger referencemanual

HTML DOM NodeList referencemanual

QuerySelector metode:

querySelector() metoden

querySelectorAll() metoden

GetElement metode:

getElementById() metoden

getElementsByTagName() metoden

getElementsByClassName() metoden