Geeft het eerste element in het document dat overeenkomt met de opgegeven selector, of groep van selectors, of null als er geen overeenkomsten zijn gevonden.

Opmerking: Bij het doorzoeken van het document wordt er gebruik gemaakt van een depth-first pre-order zoekmethode, waarbij wordt begonnen bij de eerste knoop/het eerste element in het document, en waarna er vervolgens geïtereerd wordt door verdere knopen/elementen geordend op basis van het aantal kindknopen/-elementen.

Syntaxis

element = document.querySelector(selectors);

waarbij

  • element een element-object is.
  • selectors een string is met een of meerdere CSS-selectoren, gescheiden door komma's.

Voorbeeld

In dit voorbeeld wordt het eerste element in het document met de klasse "mijnklasse" teruggestuurd:

var el = document.querySelector(".mijnklasse");

Voorbeeld: Complexe selectoren

Selectoren kunnen ook erg complex zijn, zoals gedemonstreerd in het volgende voorbeeld. Hier wordt het eerste element <input name="login"/> binnen <div class="gebruikerspaneel hoofd"> in het document teruggestuurd:

var el = document.querySelector("div.gebruikerspaneel.hoofd input[name='login']");

Opmerkingen

Stuurt null terug wanneer er geen overeenkomstig element wordt gevonden; anders wordt het eerste element dat overeenkomt teruggestuurd.

Als de selector overeenkomt met een ID, en dit ID is foutief meerdere malen gebruikt in het document, wordt het eerste element dat overeenkomt teruggestuurd.

Geeft een SYNTAX_ERR-uitzondering als de opgegeven groep van selectoren ongeldig is.

querySelector() werd geïntroduceerd in de Selectors-API.

Het string-argument dat aan querySelector wordt gegeven volgt de syntaxix van CSS.

CSS Pseudo-elementen zullen nooit een element als resultaat geven, zoals gespecificeerd in de Selectors-API.

Om een ID of selectoren te vinden die niet de CSS-syntaxis volgen (bijvoorbeeld met een dubble punt of spatie erin), moet voor het verboden karakter een schuine streep naar achteren (escaping) worden geplaatst. Omdat de schuine streep naar achteren een escapekarakter is in JavaScript, is het noodzakelijk, wanneer de ID of selectoren een schuine streep naar achteren bevatten, om twee extra schuine strepen naar achteren hieraan toe te voegen (één keer voor de JavaScript-string, en één keer voor querySelector):

<div id="foo\bar"></div>
<div id="foo:bar"></div>

<script>
  console.log('#foo\bar');               // "#fooar" (\b is het karakter voor een backspace)
  document.querySelector('#foo\bar');    // Komt nergens mee overeen

  console.log('#foo\\bar');              // "#foo\bar"
  console.log('#foo\\\\bar');            // "#foo\\bar"
  document.querySelector('#foo\\\\bar'); // Komt overeen met de eerste div

  document.querySelector('#foo:bar');    // Komt nergens mee overeen
  document.querySelector('#foo\\:bar');  // Komt overeen met de tweede div
</script>

Specificatie

Specificatie Status Opmerking
Selectors API Level 2
The definition of 'document.querySelector()' in that specification.
Obsolete  
Selectors API Level 1
The definition of 'document.querySelector()' in that specification.
Obsolete Oorspronkelijke definitie

Browsercompatibiliteit

Functionaliteit Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basis ondersteuning 1 (Yes) 3.5 8 10 3.2
Functionaliteit Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basis ondersteuning 2.1 (Yes) (Yes) 9 10.0 3.2

Zie ook:

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: evelijn, jvanes
 Laatst bijgewerkt door: evelijn,