HTML DOM querySelector() Methode

Voorbeeld

Wijzig de tekst van het eerste onderliggende element met class="example" in een <div> element:

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

Meer "Probeer het zelf" voorbeelden hieronder.

Definitie en gebruik

De methode querySelector() retourneert het eerste onderliggende element dat overeenkomt met een opgegeven CSS-selector(s) van een element.

Opmerking: de methode querySelector() retourneert alleen het eerste element dat overeenkomt met de opgegeven selectors. Gebruik in plaats daarvan de methode querySelectorAll() om alle overeenkomsten te retourneren .

Voor meer informatie over CSS Selectors, bezoek onze CSS Selectors Tutorial en onze CSS Selectors Reference .

Browserondersteuning

De cijfers in de tabel geven de eerste browserversie aan die de methode volledig ondersteunt.

Method
querySelector()	4.0	8.0	3.5	3.2	10.0

Syntaxis

element.querySelector(CSS selectors)

Parameterwaarden

Parameter	Type	Description
CSS selectors	String	Required. Specifies one or more CSS selectors to match the element. These are used to select HTML elements based on their id, classes, types, attributes, values of attributes, etc. For multiple selectors, separate each selector with a comma. The returned element depends on which element that is first found in the document (See "More Examples"). Tip: For a list of all CSS Selectors, look at our CSS Selectors Reference.

Technische details

DOM-versie:	Selectors Niveau 1 Element Object
Winstwaarde:	Het eerste element dat overeenkomt met de opgegeven CSS-kiezer(s). Als er geen overeenkomsten worden gevonden, wordt null geretourneerd. Genereert een SYNTAX_ERR-uitzondering als de opgegeven selector(s) ongeldig zijn.

Meer voorbeelden

Voorbeeld

Wijzig de tekst van het eerste <p> element in een <div> element:

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

Voorbeeld

Wijzig de tekst van het eerste <p> element met class="example" in een <div> element:

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

Voorbeeld

Verander de tekst van een element met id="demo" in een <div> element:

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

Voorbeeld

Voeg een rode rand toe aan het eerste <a>-element met een target-attribuut in een <div>-element:

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

Voorbeeld

Dit voorbeeld laat zien hoe meerdere selectors werken.

Stel dat je twee elementen hebt: een <h2> en een <h3> element.

De volgende code voegt een achtergrondkleur toe aan het eerste <h2>-element in <div>:

<div id="myDIV">
<h2>A h2 element</h2>
<h3>A h3 element</h3>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";

Als het element <h3> echter vóór het element <h2> in <div> is geplaatst. Het <h3>-element is het element dat de rode achtergrondkleur krijgt.

<div id="myDIV">
<h3>A h3 element</h3>
<h2>A h2 element</h2>
</div>

var x = document.getElementById("myDIV");
x.querySelector("h2, h3").style.backgroundColor = "red";