HTML DOM Document querySelector() metoden

definition och användning

querySelector() metoden returnerar element som matchar CSS-väljarenden förstaelement.

För att returneraallamatchningar (inte bara den första matchningen), använd querySelectorAll() istället.

Om väljaren är ogiltig: querySelector() och querySelectorAll() kommer att kasta SYNTAX_ERR undantag.

exempel

Exempel 1

Hämta det första <p>-elementet:

document.querySelector("p");

Prova själv

Exempel 2

Hämta det första elementet med klass="example":

document.querySelector(".example");

Prova själv

Exempel 3

Hämta det första <p>-elementet med klass="example":

document.querySelector("p.example");

Prova själv

Exempel 4

Ändra texten för elementet med id="demo":

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

Prova själv

Exempel 5

Välj det första <p>-elementet som har en förälder <div>-element:

document.querySelector("div > p");

Prova själv

Exempel 6

Välj det första <a>-elementet som har "target"-egenskapen:

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

Prova själv

Exempel 7

Välj den första <h3> eller den första <h4>:

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

Prova själv

Exempel 8

Välj den första <h3> eller den första <h4>:

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

Prova själv

syntaks

document.querySelector(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 ovanför sidan).

återvärd

typ beskrivning
objekt

NodeList som innehåller den första element som matchar CSS-väljaren.

Om ingen match hittas, returneras null.

skill collection och NodeList skillnad

NodeList och HTMLcollection Mycket lika.

Båda är samlings av noder (element) som hämtats från dokumentet (element) i form av en liknande array-samling (lista). Noder kan nås genom indexnummer (index). Index börjar vid 0.

Båda har length egenskap, som returnerar antalet element (samlings) i listan.

HTMLCollection ärDokumentelementsamlings.

NodeList ärDokumentnodsamlings. (elementnod, egenskapsnod och textnod).

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

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

HTMLCollection är alltidRealtidsamlings.

t.ex. om du lägger till ett <li>-element till en lista i DOM, ändras listan också i HTMLCollection.

NodeList är vanligtvisStatisksamlings.

t.ex. om du lägger till en <li>-element till en lista i DOM, ändras inte listan i NodeList.

getElementsByClassName() och getElementsByTagName() Metoderna returnerar alla en realtids HTMLCollection.

querySelectorAll() Metoden returnerar en statisk NodeList.

childNodes Egenskapen returnerar en realtids NodeList.

Webbläsarstöd

document.querySelector() är en DOM Level 1 (1998) egenskap.

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

Guide:

CSS Väljare

CSS Väljare referenshandbok

HTML DOM NodeList referenshandbok

QuerySelector-metod:

querySelector() metod

querySelectorAll() metod

GetElement-metod:

getElementById() metod

getElementsByTagName() metod

getElementsByClassName() metod