HTML DOM Element querySelector() Methode

Definitie en gebruik

querySelector() De methode retourneert het eerste kind-element dat overeenkomt met de opgegeven CSS-selector van het element.

Opmerking:

querySelector() De methode retourneert alleen het eerste element dat overeenkomt met de opgegeven selector. Voor alle overeenkomende items, gebruik dan querySelectorAll() methode.

Zie ook:

Referentiemanual

classList eigenschap

className eigenschap

querySelectorAll() methode

getElementsByTagName() methode

getElementsByClassName() methode

HTML DOM Style Object

Handleiding:

CSS Syntax

CSS Selector

CSS Selector Reference Manual

Voorbeeld

Voorbeeld 1

Wijzig de tekst van het eerste kind-element met class="example" in de <div>-elementen:

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

Probeer het zelf

Meer voorbeelden worden onderaan de pagina aangeboden.

Syntax

element.querySelector(CSSselectors)

Parameters

Parameters Beschrijving
CSSselectors

Verplicht. String. Specificeer een of meerdere CSS-selectors om elementen te matchen.

CSS-selectors worden gebruikt om HTML-elementen te kiezen op basis van id, class, type, eigenschappen, eigenschapswaarden, enz.

Voor meerdere selectors, gescheiden door komma's.

Het geretourneerde element hangt af van het eerste element dat in het document wordt gevonden (zie de onderstaande "Meer voorbeelden").

Tip:Voor een volledige lijst van CSS-selectors, raadpleeg onze CSS Selector Reference Manual.

Technische details

Retournerende waarde:

Koppelt het eerste element dat overeenkomt met de opgegeven CSS-selector.

Als er geen overeenkomende items worden gevonden, wordt null geretourneerd.

Als de opgegeven selector ongeldig is, wordt een SYNTAX_ERR-exception gegooid.
DOM versie: Element Object op niveau 1 Selectors

Meer voorbeelden

Voorbeeld 2

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

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

Probeer het zelf

Voorbeeld 3

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

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

Probeer het zelf

Voorbeeld 4

Wijzig de tekst van het element met id="demo" in de <div>-elementen:

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

Probeer het zelf

Voorbeeld 5

Voeg een rode rand toe aan de eerste <a> element met de target-eigenschap binnen de <div> elementen:

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

Probeer het zelf

Voorbeeld 6

Dit voorbeeld demonstreert hoe meerdere selectoren werken.

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

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

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

Probeer het zelf

Voorbeeld 7

Maar, als de <h3> element in de <div> voor de <h2> element staat, krijgt het <h3> element een rode achtergrondkleur.

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

Probeer het zelf

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze methode volledig ondersteunt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 8.0 3.5 3.2 10.0

Gerelateerde pagina's

CSS Handleiding:CSS Selector

CSS Referentiemanual:CSS Selector Reference Manual

JavaScript Handleiding:JavaScript HTML DOM Node List

JavaScript Referentiemanual:document.querySelector()

JavaScript Referentiemanual:element.querySelectorAll()

HTML DOM Referentiemanual:document.querySelectorAll()