diff options
Diffstat (limited to 'files/nl/web/api/document/queryselector/index.html')
| -rw-r--r-- | files/nl/web/api/document/queryselector/index.html | 162 |
1 files changed, 162 insertions, 0 deletions
diff --git a/files/nl/web/api/document/queryselector/index.html b/files/nl/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..66a6a87148 --- /dev/null +++ b/files/nl/web/api/document/queryselector/index.html @@ -0,0 +1,162 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - DOM + - Elementen + - Méthode + - Referentie + - selectoren +translation_of: Web/API/Document/querySelector +--- +<div>{{ ApiRef("DOM") }}</div> + +<p class="brush: js">Geeft het eerste <a href="/nl/docs/DOM/element">element</a> in het document dat overeenkomt met de opgegeven selector, of groep van selectors, of <code>null</code><strong> </strong>als er geen overeenkomsten zijn gevonden.</p> + +<div class="note"> +<p><strong>Opmerking</strong>: 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.</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntaxis</h2> + +<pre class="brush: js">element = document.querySelector(selectors); +</pre> + +<p>waarbij</p> + +<ul> + <li><code>element</code> een <a href="/nl/docs/DOM/element" title="en-US/docs/DOM/element">element</a>-object is.</li> + <li><code>selectors</code> een string is met een of meerdere <a href="/nl/docs/Web/Guide/CSS/Getting_Started/Selectors">CSS-selectoren</a>, gescheiden door komma's.</li> +</ul> + +<h2 id="Example" name="Example">Voorbeeld</h2> + +<p>In dit voorbeeld wordt het eerste element in het document met de klasse "<code>mijnklasse</code>" teruggestuurd:</p> + +<pre class="brush: js">var el = document.querySelector(".mijnklasse"); +</pre> + +<h2 id="ExamplePowerful" name="ExamplePowerful">Voorbeeld: Complexe selectoren</h2> + +<p><em>Selectoren</em> kunnen ook erg complex zijn, zoals gedemonstreerd in het volgende voorbeeld. Hier wordt het eerste element <code><input name="login"/></code> binnen <code><div class="gebruikerspaneel hoofd"></code> in het document teruggestuurd:</p> + +<pre class="brush: js">var el = document.querySelector("div.gebruikerspaneel.hoofd input[name='login']"); +</pre> + +<h2 id="Notes" name="Notes">Opmerkingen</h2> + +<p>Stuurt <code>null</code> terug wanneer er geen overeenkomstig element wordt gevonden; anders wordt het eerste element dat overeenkomt teruggestuurd.</p> + +<p>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.</p> + +<p>Geeft een <code>SYNTAX_ERR</code>-uitzondering als de opgegeven groep van selectoren ongeldig is.</p> + +<p><code>querySelector()</code> werd geïntroduceerd in de Selectors-API.</p> + +<p>Het string-argument dat aan <code>querySelector</code> wordt gegeven volgt de syntaxix van CSS.</p> + +<p>CSS Pseudo-elementen zullen nooit een element als resultaat geven, zoals gespecificeerd in de <a href="http://www.w3.org/TR/selectors-api/#grammar">Selectors-API</a>.</p> + +<p><span style="line-height: 1.572;">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 <em>twee</em> extra schuine strepen naar achteren hieraan toe te voegen </span>(één keer voor de JavaScript-string, en één keer voor querySelector):</p> + +<pre class="brush: html"><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> +</pre> + +<h2 id="Specificatie">Specificatie</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Opmerking</th> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 2")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> + <td>{{Spec2("Selectors API Level 1")}}</td> + <td>Oorspronkelijke definitie</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browsercompatibiliteit</h2> + +<p>{{CompatibilityTable()}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Functionaliteit</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basis ondersteuning</td> + <td>1</td> + <td>{{CompatVersionUnknown}}</td> + <td>3.5</td> + <td>8</td> + <td>10</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Functionaliteit</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basis ondersteuning</td> + <td>2.1</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>9</td> + <td>10.0</td> + <td>3.2</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Zie ook:</h2> + +<ul> + <li>{{domxref("element.querySelector()")}}</li> + <li>{{domxref("document.querySelectorAll()")}}</li> + <li>{{domxref("element.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector" title="en-US/docs/Code snippets/QuerySelector">Codesnippets voor querySelector</a></li> +</ul> |