Geeft het eerste Element in het document dat overeenkomt met de opgegeven selector, of groep van selectors.

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

Syntax

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 "myclass" teruggestuurd:

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

Voorbeeld: Complexe selectors

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

var el = document.querySelector("div.user-panel.main input[name='login']");

Notities

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 selectors ongeldig is.

querySelector() was geïntroduceerd in de Selectors API.

Het string argument dat aan querySelector wordt gegeven volgt de syntax van CS.

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 syntax volgen (bijvoorbeeld met een dubble punt of spatie erin), moet voor het verboden karakter een backslash (escaping) worden geplaatst. Omdat de backslash een escape karakter is in JavaScript is het noodzakelijk, wanneer de ID of selectoren een backslash bevatten, om twee extra backslashes 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 Initieële definitie

Browser compatibiliteit

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: jvanes
 Laatst bijgewerkt door: jvanes,