HTML DOM Element querySelector() metoden

Definition och användning

querySelector() Metoden returnerar den första underelement som matchar den specifika CSS-väljaren för elementet.

Observera:

querySelector() Metoden returnerar bara det första elementet som matchar den specifika väljaren. För att returnera alla matchande poster, använd istället querySelectorAll() metod.

Se också:

Referenshandbok:

classList-attribut

className-attribut

querySelectorAll() metod

getElementsByTagName() metod

getElementsByClassName() metod

HTML DOM Style objekt

Lektion:

CSS-syntax

CSS-selektorer

CSS-selektorer referenshandbok

Exempel

Exempel 1

Ändra texten för den första underelementet med class="example" i <div>-elementet:

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

Prova själv

Mer exempel finns på sidan nedan.

Syntaks

element.querySelector(CSSselectors)

Parameter

Parameter Beskrivning
CSSselectors

Obligatorisk. Sträng. Specificera en eller flera CSS-väljare för att matcha element.

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

För flera väljare, separera varje väljare med komma.

De element som returneras beror på den första element som hittas i dokumentet (se nedan "Mer exempel").

Tips:För en fullständig lista över CSS-väljare, se vår CSS-selektorer referenshandbok.

Tekniska detaljer

Returvärde:

Matchar den första elementet som specificeras av CSS-väljaren.

Om det inte finns några matchande poster, returneras null.

Om den specifika väljaren är ogiltig, kastas en SYNTAX_ERR-undantag.
DOM-version: Nivå 1 Elementobjekt

Mer exempel

Exempel 2

Ändra texten för det första <p>-elementet i <div>-elementet:

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

Prova själv

Exempel 3

Ändra texten för den första <p>-elementet med class="example" i <div>-elementet:

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

Prova själv

Exempel 4

Ändra texten för elementet med id="demo" i <div>-elementet:

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

Prova själv

Exempel 5

Lägg till en röd kantlinje till den första <a>-elementet inom <div>-elementet som har en target-attribut:

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

Prova själv

Exempel 6

Detta exempel visar hur flera väljare fungerar.

Anta att du har två element: <h2> och <h3>-element.

Följande kod lägger till bakgrundsfärg till det första <h2>-elementet inom <div>-elementet:

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

Prova själv

Exempel 7

Men om <div>-elementets <h3>-element placeras före <h2>-elementet, kommer <h3>-elementet att få en röd bakgrundsfärg.

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

Prova själv

Webbläsarstöd

Numrerna 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 8.0 3.5 3.2 10.0

Relaterade sidor

CSS-tutorial:CSS-selektorer

CSS referenshandbok:CSS-selektorer referenshandbok

JavaScript-tutorial:JavaScript HTML DOM Node List

JavaScript referenshandbok:document.querySelector()

JavaScript referenshandbok:element.querySelectorAll()

HTML DOM referenshandbok:document.querySelectorAll()