HTML DOM Element querySelector() metode

Definition og brug

querySelector() Metoden returnerer den første underelement, der matcher den specificerede CSS-vælger for elementet.

Bemærk:

querySelector() Metoden returnerer kun det første element, der matcher den specificerede vælger. For at returnere alle matchende elementer, skal du bruge querySelectorAll() metoden.

Se også:

Referencehåndbog:

classList egenskab

className egenskab

querySelectorAll() metoden

getElementsByTagName() metoden

getElementsByClassName() metoden

HTML DOM Style Objekt

Tilførsel:

CSS syntaks

CSS vælger

CSS vælger referencemanual

Eksempel

Eksempel 1

Ændre teksten på den første underelement i <div>-elementet med class="example":

var x = document.getElementById("myDIV");
x.querySelector(".example").innerHTML = "Hello World!";

Prøv det selv

Flere eksempler findes nedenfor på siden.

Syntaks

element.querySelector(CSSselectors)

Parameter

Parameter Beskrivelse
CSSselectors

Obligatorisk. Streng. Specificer 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 skal hver vælger adskilles med komma.

De returnerede elementer afhænger af det første element, der findes i dokumentet (se nedenstående "Flere eksempler").

Tip:For en fuld liste over CSS-vælgere, se vores CSS vælger referencemanual.

Tekniske detaljer

Returværdi:

Matcher den første element, der matcher den specificerede CSS-vælger.

Hvis der ikke findes nogen matchende elementer, returneres null.

Hvis den specificerede vælger er ugyldig, kastes SYNTAX_ERR-undtagelsen.
DOM-version: Elementobjekt på Selекторniveau 1

Flere eksempler

Eksempel 2

Ændre teksten på den første <p>-elementet i <div>-elementet:

var x = document.getElementById("myDIV");
x.querySelector("p").innerHTML = "Hello World!";

Prøv det selv

Eksempel 3

Ændre teksten på den første <p>-elementet med class="example" i <div>-elementet:

var x = document.getElementById("myDIV");
x.querySelector("p.example").innerHTML = "Hello World!";

Prøv det selv

Eksempel 4

Ændre teksten på elementet med id="demo" i <div>-elementet:

var x = document.getElementById("myDIV");
x.querySelector("#demo").innerHTML = "Hello World!";

Prøv det selv

Eksempel 5

Tilføj en rød kant på det første <a>-element, der sætter target-attributten i <div>-elementet:

var x = document.getElementById("myDIV");
x.querySelector("a[target]").style.border = "10px solid red";

Prøv det selv

Eksempel 6

Dette eksempel viser, hvordan flere selektorer fungerer.

Antag, at du har to elementer: <h2> og <h3>-elementer.

Følgende kode tilføjer en baggrundsfarve til det første <h2>-element i <div>-elementet:

<div id="myDIV">
  <h2>Et h2-element</h2>
  <h3>Et h3-element</h3>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Prøv det selv

Eksempel 7

Men, hvis <div>-elementets <h3>-element placeres før <h2>-elementet.<h3>-elementet vil få en rød baggrundsfarve.

<div id="myDIV">
  <h3>Et h3-element</h3>
  <h2>Et h2-element</h2>
</div>
var x = document.getElementById("myDIV");
x.querySelector("h2, h3").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 8.0 3.5 3.2 10.0

Relaterede sider

CSS Tutorial:CSS vælger

CSS Reference Manual:CSS vælger referencemanual

JavaScript Tutorial:JavaScript HTML DOM Node List

JavaScript Reference Manual:document.querySelector()

JavaScript Reference Manual:element.querySelectorAll()

HTML DOM Reference Manual:document.querySelectorAll()