HTML DOM Document querySelector() method

Definitie en gebruik

querySelector() De methode retourneert elementen die overeenkomen met de CSS-selectieEersteelementen.

Om terug te kerenAlleovereenkomende items (niet alleen de eerste overeenkomst), gebruik dan querySelectorAll().

Als de selector ongeldig is, querySelector() en querySelectorAll() zal allemaal gooien SYNTAX_ERR Uitzonderingen.

Voorbeeld

Voorbeeld 1

Haal het eerste <p>-element op:

document.querySelector("p");

Probeer het zelf

Voorbeeld 2

Haal het eerste element met de klasse "example" op:

document.querySelector(".example");

Probeer het zelf

Voorbeeld 3

Haal het eerste <p>-element met de klasse "example" op:

document.querySelector("p.example");

Probeer het zelf

Voorbeeld 4

Wijzig de tekst van het element met id="demo":

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

Probeer het zelf

Voorbeeld 5

Selecteer het eerste <p>-element dat een ouder <div>-element heeft:

document.querySelector("div > p");

Probeer het zelf

Voorbeeld 6

Selecteer het eerste <a>-element met de eigenschap "target":

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

Probeer het zelf

Voorbeeld 7

Selecteer de eerste <h3> of de eerste <h4>:

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

Probeer het zelf

Voorbeeld 8

Selecteer de eerste <h3> of de eerste <h4>:

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

Probeer het zelf

Syntax

document.querySelector(cssSelectors)

Parameter

Parameter Beschrijving
cssSelectors

Verplicht. Een of meerdere CSS-selectoren.

CSS-selectoren kiezen HTML-elementen op basis van id, klasse, type, eigenschappen, eigenschapswaarden, enz.

Voor een volledige lijst, bezoek onze CSS selector reference manual.

Voor meerdere selectoren, gescheiden door komma's (zie voorbeeld boven op de pagina).

Retournerde waarde

Type Beschrijving
Object

NodeList die de eerste elementen bevat die overeenkomen met de CSS-selectie.

Retourneert null als er geen overeenkomende items zijn gevonden.

Het verschil tussen HTMLCollection en NodeList

NodeList en HTMLcollection Zeer vergelijkbaar.

Beide zijn verzamelingen van soortgelijke array van knooppunten (elementen) die worden geëxtraheerd uit het document. Ze kunnen worden bereikt via hun indexnummer (index). De index begint bij 0.

Beide hebben length Eigenschap, die het aantal elementen in de lijst (verzameling) retourneert.

Een HTMLCollection isDocumentelementVerzameling.

Een NodeList isDocumentknooppuntVerzameling van (elementknooppunten, eigenschapsknooppunten en tekstknooppunten).

HTMLCollection items kunnen worden bereikt via hun naam, id of indexnummer.

NodeList items kunnen alleen worden bereikt via hun indexnummer.

Een HTMLCollection is altijdReal-timeVerzameling.

Bijvoorbeeld: als je een <li> element toevoegt aan de lijst in de DOM, verandert de lijst in de HTMLCollection ook.

Een NodeList is meestalStatischVerzameling.

Bijvoorbeeld: als je een <li> element toevoegt aan de lijst in de DOM, verandert de lijst in de NodeList niet.

getElementsByClassName() en getElementsByTagName() De methoden retourneren allemaal een real-time HTMLCollection.

querySelectorAll() De methode retourneert een statische NodeList.

childNodes De eigenschap retourneert een real-time NodeList.

Browserondersteuning

document.querySelector() is een DOM Level 1 (1998) kenmerk.

Ondersteund door alle browsers:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Ondersteuning 9-11 Ondersteuning Ondersteuning Ondersteuning Ondersteuning

Gerelateerde pagina's

Handleiding:

CSS selector

CSS selector reference manual

HTML DOM NodeList reference manual

QuerySelector Methode:

querySelector() Methode

querySelectorAll() Methode

GetElement Methode:

getElementById() Methode

getElementsByTagName() Methode

getElementsByClassName() Methode