diff options
Diffstat (limited to 'files/nl/web/api/document')
| -rw-r--r-- | files/nl/web/api/document/createtextnode/index.html | 120 | ||||
| -rw-r--r-- | files/nl/web/api/document/currentscript/index.html | 117 | ||||
| -rw-r--r-- | files/nl/web/api/document/getelementbyid/index.html | 202 | ||||
| -rw-r--r-- | files/nl/web/api/document/index.html | 447 | ||||
| -rw-r--r-- | files/nl/web/api/document/queryselector/index.html | 162 |
5 files changed, 1048 insertions, 0 deletions
diff --git a/files/nl/web/api/document/createtextnode/index.html b/files/nl/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..f786a5bb70 --- /dev/null +++ b/files/nl/web/api/document/createtextnode/index.html @@ -0,0 +1,120 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +translation_of: Web/API/Document/createTextNode +--- +<div>{{APIRef("DOM")}}</div> + +<p>Maakt een nieuwe Text node aan.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>var text</var> = document.createTextNode(<var>data</var>); +</pre> + +<ul> + <li><code>text</code> is een Text node.</li> + <li><code>data</code> is een string met daarin de data bestemd voor de text node.</li> +</ul> + +<h2 id="Voorbeeld">Voorbeeld</h2> + +<pre class="brush:js"><!DOCTYPE html> +<html lang="en"> +<head> +<title>createTextNode voorbeeld</title> +<script> +function addTextNode(text) { + var newtext = document.createTextNode(text), + p1 = document.getElementById("p1"); + + p1.appendChild(newtext); +} +</script> +</head> + +<body> + <button onclick="addTextNode('WIJ KUNNEN HET! ');">WIJ KUNNEN HET!</button> + <button onclick="addTextNode('WERKELIJK! ');">WERKELIJK!</button> + <button onclick="addTextNode('GEENSZINS! ');">GEENSZINS!</button> + + <hr /> + + <p id="p1">Eerste regel van de paragraaf.</p> +</body> +</html> +</pre> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specificatie</th> + <th scope="col">Status</th> + <th scope="col">Opmerking</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td> + <td>{{Spec2("DOM3 Core")}}</td> + <td>No change</td> + </tr> + <tr> + <td>{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}</td> + <td>{{Spec2("DOM2 Core")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Eigenschap</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Eigenschap</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/nl/web/api/document/currentscript/index.html b/files/nl/web/api/document/currentscript/index.html new file mode 100644 index 0000000000..fd86f2f38e --- /dev/null +++ b/files/nl/web/api/document/currentscript/index.html @@ -0,0 +1,117 @@ +--- +title: Document.currentScript +slug: Web/API/Document/currentScript +tags: + - API + - DOM + - Property + - Reference +translation_of: Web/API/Document/currentScript +--- +<div>{{ApiRef("DOM")}}</div> + +<p>Geeft het {{HTMLElement("script")}} element wiens script op dit moment wordt uitgevoerd.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>curScriptElement</var> = document.currentScript; +</pre> + +<h2 id="Voorbeeld">Voorbeeld</h2> + +<p>Dit voorbeeld controleert of het script asynchroon wordt uitgevoerd:</p> + +<pre class="brush:js">if (document.currentScript.async) { + console.log("Wordt asynchroon uitgevoerd"); +} else { + console.log("Wordt synchroon uitgevoerd"); +}</pre> + +<p><a href="/samples/html/currentScript.html">View Live Examples</a></p> + +<h2 id="Opmerkingen">Opmerkingen</h2> + +<p>Het is belangrijk om te weten dat dit geen referentie naar het script-element geeft als de code in het script wordt aangeroepen als een callback of event handler; het refereert alleen naar het element wanneer dit initieel wordt verwerkt.</p> + +<h2 id="Specificaties">Specificaties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#dom-document-currentscript", "Document.currentScript")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initiële definitie</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibiliteit">Browser compatibiliteit</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>{{CompatChrome(29.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("2.0")}}</td> + <td>{{CompatNo}}</td> + <td>16</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for 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>Basisondersteuning</td> + <td>4.4</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zie_ook">Zie ook</h2> + +<ul> + <li>{{HTMLElement("script")}}</li> + <li>{{domxref("document.onafterscriptexecute")}}</li> + <li>{{domxref("document.onbeforescriptexecute")}}</li> +</ul> diff --git a/files/nl/web/api/document/getelementbyid/index.html b/files/nl/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..e399258187 --- /dev/null +++ b/files/nl/web/api/document/getelementbyid/index.html @@ -0,0 +1,202 @@ +--- +title: document.getElementById() +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Document + - Elementen + - Method + - Reference + - Web + - getElementById + - id +translation_of: Web/API/Document/getElementById +--- +<div>{{ ApiRef("DOM") }}</div> + +<div></div> + +<p>Returnt een DOM-referentie naar een element aan de hand van de <a href="/en-US/docs/DOM/element.id">ID</a>; de ID is een string die gebruikt kan worden om een element de identificeren, door middel van het HTML-attribuut <code>id</code>.</p> + +<p>Als je toegang wil krijgen tot een element, dat geen ID heeft, kan je gebruik maken van {{domxref("Document.querySelector", "querySelector()")}} om eender welk element te vinden gebruik makend van {{Glossary("CSS selector", "selector")}}.</p> + +<p><strong><span style="">Syntax</span></strong></p> + +<pre class="eval notranslate"><em>var element</em> = document.getElementById(<em>id</em>); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><strong><code>id</code></strong></dt> + <dd>is een hoofdlettergevoelige string die overeenkomt met de unieke ID van het element dat gezocht wordt.</dd> +</dl> + +<h3 id="Return_Value">Return Value</h3> + +<dl> + <dt><strong><code>element</code></strong></dt> + <dd>is een DOM-referentie naar een {{domxref("Element")}}-object, of <code>null</code> als het element met het gespecificeerde ID niet in het document voorkomt.</dd> +</dl> + +<h2 id="Example1" name="Example1">Voorbeeld</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html notranslate"><html> +<head> + <title>getElementById example</title> +</head> +<body> + <p id="para">Some text here</p> + <button onclick="changeColor('blue');">blue</button> + <button onclick="changeColor('red');">red</button> +</body> +</html></pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js notranslate">function changeColor(newColor) { + var elem = document.getElementById('para'); + elem.style.color = newColor; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{ EmbedLiveSample('Example1', 250, 100) }}</p> + +<h2 id="Notes" name="Notes">Notities</h2> + +<p>Let op dat "Id" in "getElementById" hoofdlettergevoelig is, en correct geschreven <em>moet</em> zijn om te werken. "getElementByID" zal niet werken, hoewel deze manier van schrijven natuurlijk lijkt.</p> + +<p>In tegenstelling tot andere methods die erop lijken, is <code>getElementById</code> alleen beschikbaar als method op het globale <code>document</code>-object, en <em>niet</em> beschikbaar als method op alle elementen in de DOM. Omdat ID-waarden uniek moeten zijn in HTML documenten is er geen behoefte aan "lokale" versies van deze functie.</p> + +<h2 id="Example" name="Example">Voorbeeld</h2> + +<pre class="notranslate"><!doctype html> +<html> +<head> + <meta charset="UTF-8"> + <title>Document</title> +</head> +<body> + <div id="parent-id"> + <p>hello word1</p> + <p id="test1">hello word2</p> + <p>hello word3</p> + <p>hello word4</p> + </div> + <script> + var parentDOM = document.getElementById('parent-id'); + var test1=parentDOM.getElementById('test1'); + //throw error + //Uncaught TypeError: parentDOM.getElementById is not a function + </script> +</body> +</html></pre> + +<p>Als er geen element bestaat met de gespecificiëerde <code>id</code>, geeft deze functie <code>null</code>. Let op: de id-parameter is hoofdlettergevoelig, dus <code>document.getElementById("<strong>M</strong>ain")</code> zal <code>null</code> geven, in plaats van het element <code><div id="main"></code>, omdat "M" en "m" verschillend zijn in deze method.</p> + +<p><strong>Elementen die niet in het document staan</strong>, zullen niet gezocht worden door <code>getElementById()</code>. Wanneer je een element creëert en het een id toewijst, moet je het element van te voren aan de document tree toevoegen door middel van {{domxref("Node.insertBefore()")}} — of een andere erop lijkende method — vóórdat <code>getElementById()</code> er toegang toe heeft.</p> + +<pre class="brush: js notranslate">var element = document.createElement('div'); +element.id = 'testqq'; +var el = document.getElementById('testqq'); // el will be null! +</pre> + +<p><strong>Niet-HTML documenten.</strong> De DOM-implementatie moet informatie bevatten over welke attributes het type ID dragen. Attributen met de naam "id" zijn niet per se van het type ID, tenzij dat expliciet gedefiniëerd staat in de DTD van het document. Het attribuut <code>id</code> is gedefiniëerd als type ID in de gevallen van onder andere <a href="/en-US/docs/Glossary/XHTML">XHTML</a> en <a href="/en-US/docs/XUL">XUL</a>. Implementaties die niet als type ID gedefiniëerd zijn, returnen <code>null</code>.</p> + +<h2 id="Specification" name="Specification">Specificatie</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition for the interface</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Supersede DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Supersede DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Intend to supersede DOM 3</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</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>Basisondersteuning</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(1.0) }}</td> + <td>5.5</td> + <td>7.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basisondersteuning</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(1.0) }}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">Zie ook</h2> + +<ul> + <li>{{domxref("Document")}} referentie voor andere methods en properties die je kunt gebruiken om naar elementen te refereren.</li> + <li>{{domxref("Document.querySelector()")}} voor selectors via queries als <code>'div.myclass'</code></li> + <li><a href="/en-US/docs/xml/xml:id" title="en-US/docs/xml/id">xml:id</a> - heeft een utility method om <code>getElementById()</code> 'xml:id' in XML documenten te laten ontvangen (zoals gereturned door Ajax calls)</li> +</ul> diff --git a/files/nl/web/api/document/index.html b/files/nl/web/api/document/index.html new file mode 100644 index 0000000000..a64e97a986 --- /dev/null +++ b/files/nl/web/api/document/index.html @@ -0,0 +1,447 @@ +--- +title: Document +slug: Web/API/Document +tags: + - API + - DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/Document +--- +<div>{{APIRef}}</div> + +<div> </div> + +<p>The <strong><code>Document</code></strong> interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the <a href="/en-US/docs/Using_the_W3C_DOM_Level_1_Core" title="Using_the_W3C_DOM_Level_1_Core">DOM tree</a>. The DOM tree includes elements such as {{HTMLElement("body")}} and {{HTMLElement("table")}}, among <a href="/en-US/docs/Web/HTML/Element">many others</a>. It provides functionality global to the document, like how to obtain the page's URL and create new elements in the document.</p> + +<p>{{inheritanceDiagram}}</p> + +<p>The <code>Document</code> interface describes the common properties and methods for any kind of document. Depending on the document's type (e.g. <a href="/en-US/docs/HTML" title="HTML">HTML</a>, <a href="/en-US/docs/XML" title="XML">XML</a>, SVG, …), a larger API is available: HTML documents, served with the <code>text/html</code> content type, also implement the {{domxref("HTMLDocument")}} interface, wherease SVG documents implement the {{domxref("SVGDocument")}} interface.</p> + +<h2 id="Properties" name="Properties">Properties</h2> + +<p><em>This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</em></p> + +<dl> + <dt>{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}</dt> + <dd>Provides access to all elements with an <code>id</code>. This is a legacy, non-standard interface and you should use the {{domxref("document.getElementById()")}} method instead.</dd> + <dt>{{domxref("Document.async")}} {{Deprecated_inline}}</dt> + <dd>Used with {{domxref("Document.load")}} to indicate an asynchronous request.</dd> + <dt>{{domxref("Document.characterSet")}} {{readonlyinline}}</dt> + <dd>Returns the character set being used by the document.</dd> + <dt>{{domxref("Document.charset")}} {{readonlyinline}} {{Deprecated_inline}}</dt> + <dd>Alias of {{domxref("Document.characterSet")}}. Use this property instead.</dd> + <dt>{{domxref("Document.compatMode")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Indicates whether the document is rendered in <em>quirks</em> or <em>strict</em> mode.</dd> + <dt>{{domxref("Document.contentType")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Returns the Content-Type from the MIME Header of the current document.</dd> + <dt>{{domxref("Document.doctype")}} {{readonlyinline}}</dt> + <dd>Returns the Document Type Definition (DTD) of the current document.</dd> + <dt>{{domxref("Document.documentElement")}} {{readonlyinline}}</dt> + <dd>Returns the {{domxref("Element")}} that is a direct child of the document. For HTML documents, this is normally the HTML element.</dd> + <dt>{{domxref("Document.documentURI")}} {{readonlyinline}}</dt> + <dd>Returns the document location as a string.</dd> + <dt>{{domxref("Document.domConfig")}} {{Deprecated_inline}}</dt> + <dd>Should return a {{domxref("DOMConfiguration")}} object.</dd> + <dt>{{domxref("Document.fullscreen")}} {{obsolete_inline}}</dt> + <dd><code>true</code> when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.</dd> + <dt>{{domxref("Document.hidden")}} {{readonlyinline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.implementation")}} {{readonlyinline}}</dt> + <dd>Returns the DOM implementation associated with the current document.</dd> + <dt>{{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}}</dt> + <dd>Alias of {{domxref("Document.characterSet")}}. Use this property instead.</dd> + <dt>{{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}}</dt> + <dd>Returns the name of the style sheet set that was last enabled. Has the value <code>null</code> until the style sheet is changed by setting the value of {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}.</dd> + <dt>{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}</dt> + <dd>Returns a {{jsxref("Boolean")}} that is <code>true</code> only if this document is synthetic, such as a standalone image, video, audio file, or the like.</dd> + <dt>{{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd>The element that's currently in full screen mode for this document.</dd> + <dt>{{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}</dt> + <dd><code>true</code> if calling {{domxref("Element.mozRequestFullscreen()")}} would succeed in the curent document.</dd> + <dt>{{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>Returns the element set as the target for mouse events while the pointer is locked. <code>null</code> if lock is pending, pointer is unlocked, or if the target is in another document.</dd> + <dt>{{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}}</dt> + <dd>Returns the preferred style sheet set as specified by the page author.</dd> + <dt>{{domxref("Document.scrollingElement")}} {{experimental_inline}} {{readonlyinline}}</dt> + <dd>Returns a reference to the {{domxref("Element")}} that scrolls the document.</dd> + <dt>{{domxref("Document.selectedStyleSheetSet")}}</dt> + <dd>Returns which style sheet set is currently in use.</dd> + <dt>{{domxref("Document.styleSheets")}} {{readonlyinline}}</dt> + <dd>Returns a list of the style sheet objects on the current document.</dd> + <dt>{{domxref("Document.styleSheetSets")}} {{readonlyinline}}</dt> + <dd>Returns a list of the style sheet sets available on the document.</dd> + <dt>{{domxref("Document.timeline")}} {{readonlyinline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.undoManager")}} {{readonlyinline}} {{experimental_inline}}</dt> + <dd>…</dd> + <dt>{{domxref("Document.URL")}} {{readonlyinline}}</dt> + <dd>Returns ...</dd> + <dt>{{domxref("Document.visibilityState")}} {{readonlyinline}}</dt> + <dd> + <p>Returns a <code>string</code> denoting the visibility state of the document. Possible values are <code>visible</code>, <code>hidden</code>, <code>prerender</code>, and <code>unloaded</code>.</p> + </dd> + <dt>{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}</dt> + <dd>Returns the encoding as determined by the XML declaration.</dd> + <dt>{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns <code>true</code> if the XML declaration specifies the document to be standalone (<em>e.g.,</em> An external part of the DTD affects the document's content), else <code>false</code>.</dd> + <dt>{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}</dt> + <dd>Returns the version number as specified in the XML declaration or <code>"1.0"</code> if the declaration is absent.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<p>{{page("/en-US/docs/Web/API/ParentNode","Properties")}}</p> + +<h3 id="Extension_for_HTML_document">Extension for HTML document</h3> + +<p><em>The <code>Document</code> interface for HTML documents inherits from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents.</em></p> + +<dl> + <dt>{{domxref("Document.activeElement")}} {{readonlyinline}}</dt> + <dd>Returns the currently focused element.</dd> + <dt>{{domxref("Document.alinkColor")}} {{Deprecated_inline}}</dt> + <dd>Returns or sets the color of active links in the document body.</dd> + <dt>{{domxref("Document.anchors")}}</dt> + <dd>Returns a list of all of the anchors in the document.</dd> + <dt>{{domxref("Document.applets")}} {{Deprecated_inline}}</dt> + <dd>Returns an ordered list of the applets within a document.</dd> + <dt>{{domxref("Document.bgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the background color of the current document.</dd> + <dt>{{domxref("Document.body")}}</dt> + <dd>Returns the {{HTMLElement("body")}} element of the current document.</dd> + <dt>{{domxref("Document.cookie")}}</dt> + <dd>Returns a semicolon-separated list of the cookies for that document or sets a single cookie.</dd> + <dt>{{domxref("Document.defaultView")}} {{readonlyinline}}</dt> + <dd>Returns a reference to the window object.</dd> + <dt>{{domxref("Document.designMode")}}</dt> + <dd>Gets/sets the ability to edit the whole document.</dd> + <dt>{{domxref("Document.dir")}} {{readonlyinline}}</dt> + <dd>Gets/sets directionality (rtl/ltr) of the document.</dd> + <dt>{{domxref("Document.domain")}} {{readonlyinline}}</dt> + <dd>Returns the domain of the current document.</dd> + <dt>{{domxref("Document.embeds")}} {{readonlyinline}}</dt> + <dd>Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.</dd> + <dt>{{domxref("document.fgColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the foreground color, or text color, of the current document.</dd> + <dt>{{domxref("Document.forms")}} {{readonlyinline}}</dt> + <dd>Returns a list of the {{HTMLElement("form")}} elements within the current document.</dd> + <dt>{{domxref("Document.head")}} {{readonlyinline}}</dt> + <dd>Returns the {{HTMLElement("head")}} element of the current document.</dd> + <dt>{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Gets/sets the height of the current document.</dd> + <dt>{{domxref("Document.images")}} {{readonlyinline}}</dt> + <dd>Returns a list of the images in the current document.</dd> + <dt>{{domxref("Document.lastModified")}} {{readonlyinline}}</dt> + <dd>Returns the date on which the document was last modified.</dd> + <dt>{{domxref("Document.linkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of hyperlinks in the document.</dd> + <dt>{{domxref("Document.links")}} {{readonlyinline}}</dt> + <dd>Returns a list of all the hyperlinks in the document.</dd> + <dt>{{domxref("Document.location")}} {{readonlyinline}}</dt> + <dd>Returns the URI of the current document.</dd> + <dt>{{domxref("Document.plugins")}} {{readonlyinline}}</dt> + <dd>Returns a list of the available plugins.</dd> + <dt>{{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Returns loading status of the document.</dd> + <dt>{{domxref("Document.referrer")}} {{readonlyinline}}</dt> + <dd>Returns the URI of the page that linked to this page.</dd> + <dt>{{domxref("Document.scripts")}} {{readonlyinline}}</dt> + <dd>Returns all the {{HTMLElement("script")}} elements on the document.</dd> + <dt>{{domxref("Document.title")}}</dt> + <dd>Sets or gets title of the current document.</dd> + <dt>{{domxref("Document.URL")}} {{readonlyInline}}</dt> + <dd>Returns<span style="line-height: 19.0909080505371px;"> the document location as a string.</span></dd> + <dt>{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}</dt> + <dd>Gets/sets the color of visited hyperlinks.</dd> + <dt>{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns the width of the current document.</dd> +</dl> + +<h3 id="Event_handlers" name="Event_handlers">Event handlers</h3> + +<dl> + <dt>{{domxref("Document.onafterscriptexecute")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("afterscriptexecute")}} event.</dd> + <dt>{{domxref("Document.onbeforescriptexecute")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("beforescriptexecute")}} event.</dd> + <dt>{{domxref("Document.oncopy")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("copy")}} event.</dd> + <dt>{{domxref("Document.oncut")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("cut")}} event.</dd> + <dt>{{domxref("Document.onfullscreenchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd> + <dt>{{domxref("Document.onfullscreenerror")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd> + <dt>{{domxref("Document.onpaste")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("paste")}} event.</dd> + <dt>{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>Represents the event handling code for the {{event("pointerlockchange")}} event.</dd> + <dt>{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>Represetnts the event handling code for the {{event("pointerlockerror")}} event.</dd> + <dt>{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}</dt> + <dd>Represents the event handling code for the {{event("readystatechange")}} event.</dd> + <dt>{{domxref("Document.onselectionchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.</dd> + <dt>{{domxref("Document.onwheel")}} {{non-standard_inline}}</dt> + <dd>Represents the event handling code for the {{event("wheel")}} event.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("GlobalEventHandlers")}} interface:</p> + +<p>{{Page("/en-US/docs/Web/API/GlobalEventHandlers", "Properties")}}</p> + +<h2 id="Methods" name="Methods">Methods</h2> + +<p><em>This interface also inherits from the {{domxref("Node")}} and {{domxref("EventTarget")}} interfaces.</em></p> + +<dl> + <dt>{{domxref("Document.adoptNode()")}}</dt> + <dd>Adopt node from an external document.</dd> + <dt>{{domxref("Document.captureEvents()")}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("Window.captureEvents")}}.</dd> + <dt>{{domxref("Document.caretPositionFromPoint()")}}{{experimental_inline}}</dt> + <dd>Gets the {{domxref("CaretPosition")}} at or near the specified coordinates.</dd> + <dt>{{domxref("Document.caretRangeFromPoint()")}}{{non-standard_inline}}</dt> + <dd>Gets a {{Domxref("Range")}} object for the document fragment under the specified coordinates.</dd> + <dt>{{domxref("Document.createAttribute()")}}</dt> + <dd>Creates a new {{domxref("Attr")}} object and returns it.</dd> + <dt>{{domxref("Document.createAttributeNS()")}}</dt> + <dd>Creates a new attribute node in a given namespace and returns it.</dd> + <dt>{{domxref("Document.createCDATASection()")}}</dt> + <dd>Creates a new CDATA node and returns it.</dd> + <dt>{{domxref("Document.createComment()")}}</dt> + <dd>Creates a new comment node and returns it.</dd> + <dt>{{domxref("Document.createDocumentFragment()")}}</dt> + <dd>Creates a new document fragment.</dd> + <dt>{{domxref("Document.createElement()")}}</dt> + <dd>Creates a new element with the given tag name.</dd> + <dt>{{domxref("Document.createElementNS()")}}</dt> + <dd>Creates a new element with the given tag name and namespace URI.</dd> + <dt>{{domxref("Document.createEntityReference()")}} {{obsolete_inline}}</dt> + <dd>Creates a new entity reference object and returns it.</dd> + <dt>{{domxref("Document.createEvent()")}}</dt> + <dd>Creates an event object.</dd> + <dt>{{domxref("Document.createNodeIterator()")}}</dt> + <dd>Creates a {{domxref("NodeIterator")}} object.</dd> + <dt>{{domxref("Document.createProcessingInstruction()")}}</dt> + <dd>Creates a new {{domxref("ProcessingInstruction")}} object.</dd> + <dt>{{domxref("Document.createRange()")}}</dt> + <dd>Creates a {{domxref("Range")}} object.</dd> + <dt>{{domxref("Document.createTextNode()")}}</dt> + <dd>Creates a text node.</dd> + <dt>{{domxref("Document.createTouch()")}}</dt> + <dd>Creates a {{domxref("Touch")}} object.</dd> + <dt>{{domxref("Document.createTouchList()")}}</dt> + <dd>Creates a {{domxref("TouchList")}} object.</dd> + <dt>{{domxref("Document.createTreeWalker()")}}</dt> + <dd>Creates a {{domxref("TreeWalker")}} object.</dd> + <dt>{{domxref("Document.elementFromPoint()")}}{{experimental_inline}}</dt> + <dd>Returns the topmost element at the specified coordinates. </dd> + <dt>{{domxref("Document.elementsFromPoint()")}}{{experimental_inline}}</dt> + <dd>Returns an array of all elements at the specified coordinates.</dd> + <dt>{{domxref("Document.enableStyleSheetsForSet()")}}</dt> + <dd>Enables the style sheets for the specified style sheet set.</dd> + <dt>{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}</dt> + <dd>Release the pointer lock.</dd> + <dt>{{domxref("Document.getAnimations()")}} {{experimental_inline}}</dt> + <dd>Returns an array of all {{domxref("Animation")}} objects currently in effect whose target elements are descendants of the <code>document</code>.</dd> + <dt>{{domxref("Document.getElementsByClassName()")}}</dt> + <dd>Returns a list of elements with the given class name.</dd> + <dt>{{domxref("Document.getElementsByTagName()")}}</dt> + <dd>Returns a list of elements with the given tag name.</dd> + <dt>{{domxref("Document.getElementsByTagNameNS()")}}</dt> + <dd>Returns a list of elements with the given tag name and namespace.</dd> + <dt>{{domxref("Document.importNode()")}}</dt> + <dd>Returns a clone of a node from an external document.</dd> + <dt>{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}</dt> + <dd>Replaces entities, normalizes text nodes, etc.</dd> + <dt>{{domxref("Document.registerElement()")}} {{experimental_inline}}</dt> + <dd>Registers a web component.</dd> + <dt>{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Releases the current mouse capture if it's on an element in this document.</dd> + <dt>{{domxref("Document.releaseEvents()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>See {{domxref("Window.releaseEvents()")}}.</dd> + <dt>{{domxref("Document.routeEvent()")}} {{non-standard_inline}} {{obsolete_inline(24)}}</dt> + <dd>See {{domxref("Window.routeEvent()")}}.</dd> + <dt>{{domxref("Document.mozSetImageElement()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Allows you to change the element being used as the background image for a specified element ID.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("ParentNode")}} interface:</p> + +<dl> + <dt>{{domxref("document.getElementById","document.getElementById(String id)")}}</dt> + <dd>Returns an object reference to the identified element.</dd> + <dt>{{domxref("document.querySelector","document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns the first Element node within the document, in document order, that matches the specified selectors.</dd> + <dt>{{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}</dt> + <dd>Returns a list of all the Element nodes within the document that match the specified selectors.</dd> +</dl> + +<p>The <code>Document</code> interface is extended with the {{domxref("XPathEvaluator")}} interface:</p> + +<dl> + <dt>{{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}}</dt> + <dd>Compiles an <code><a href="/en-US/docs/XPathExpression" title="XPathExpression">XPathExpression</a></code> which can then be used for (repeated) evaluations.</dd> + <dt>{{domxref("document.createNSResolver","document.createNSResolver(Node resolver)")}}</dt> + <dd>Creates an {{domxref("XPathNSResolver")}} object.</dd> + <dt>{{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}</dt> + <dd>Evaluates an XPath expression.</dd> +</dl> + +<h3 id="Extension_for_HTML_documents">Extension for HTML documents</h3> + +<p>The <code>Document</code> interface for HTML documents inherit from the {{domxref("HTMLDocument")}} interface or, since HTML5, is extended for such documents:</p> + +<dl> + <dt>{{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.</dd> + <dt>{{domxref("document.close()")}}</dt> + <dd>Closes a document stream for writing.</dd> + <dt>{{domxref("document.execCommand","document.execCommand(String command[, Boolean showUI[, String value]])")}}</dt> + <dd>On an editable document, executes a formating command.</dd> + <dt>{{domxref("document.getElementsByName","document.getElementsByName(String name)")}}</dt> + <dd>Returns a list of elements with the given name.</dd> + <dt>{{domxref("document.getSelection()")}}</dt> + <dd>Returns a {{domxref("Selection")}} object related to text selected in the document.</dd> + <dt>{{domxref("document.hasFocus()")}}</dt> + <dd>Returns <code>true</code> if the focus is currently located anywhere inside the specified document.</dd> + <dt>{{domxref("document.open()")}}</dt> + <dd>Opens a document stream for writing.</dd> + <dt>{{domxref("document.queryCommandEnabled","document.queryCommandEnabled(String command)")}}</dt> + <dd>Returns true if the formating command can be executed on the current range.</dd> + <dt>{{domxref("document.queryCommandIndeterm","document.queryCommandIndeterm(String command)")}}</dt> + <dd>Returns true if the formating command is in an indeterminate state on the current range.</dd> + <dt>{{domxref("document.queryCommandState","document.queryCommandState(String command)")}}</dt> + <dd>Returns true if the formating command has been executed on the current range.</dd> + <dt>{{domxref("document.queryCommandSupported","document.queryCommandSupported(String command)")}}</dt> + <dd>Returns true if the formating command is supported on the current range.</dd> + <dt>{{domxref("document.queryCommandValue","document.queryCommandValue(String command)")}}</dt> + <dd>Returns the current value of the current range for a formating command.</dd> + <dt>{{domxref("document.write","document.write(String text)")}}</dt> + <dd>Writes text in a document.</dd> + <dt>{{domxref("document.writeln","document.writeln(String text)")}}</dt> + <dd>Writes a line of text in a document.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Selection API', '', 'Extend Document and GlobalEventHandlers')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>Adds <code>onselectstart</code> and <code>onselectionchange</code>.</td> + </tr> + <tr> + <td>{{SpecName('DOM1','#i-Document','Document')}}</td> + <td>{{Spec2('DOM1')}}</td> + <td>Initial definition for the interface</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM2 Core')}}</td> + <td>Supersede DOM 1</td> + </tr> + <tr> + <td>{{SpecName('DOM3 Core','#i-Document','Document')}}</td> + <td>{{Spec2('DOM3 Core')}}</td> + <td>Supersede DOM 2</td> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-document','Document')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Intend to supersede DOM 3</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Turn the {{domxref("HTMLDocument")}} interface into a <code>Document</code> extension.</td> + </tr> + <tr> + <td>{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}</td> + <td>{{Spec2('DOM3 XPath')}}</td> + <td>Define the {{domxref("XPathEvaluator")}} interface which extend document.</td> + </tr> + <tr> + <td>{{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}}</td> + <td>{{Spec2('Page Visibility API')}}</td> + <td>Extend the <code>Document</code> interface with the <code>visibilityState</code> and <code>hidden</code> attributes</td> + </tr> + <tr> + <td>{{SpecName('HTML Editing','#dom-document-getselection','Document')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM View')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('CSSOM')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Extend the <code>Document</code> interface</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility_notes">Browser compatibility notes</h2> + +<h3 id="Firefox_notes">Firefox notes</h3> + +<p>Mozilla defines a set of non-standard properties made only for XUL content:</p> + +<dl> + <dt>{{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}</dt> + <dd>Returns the {{HTMLElement("script")}} element that is currently executing.</dd> + <dt>{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}</dt> + <dd>(<strong>Mozilla add-ons only!</strong>) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).</dd> + <dt>{{domxref("document.popupNode")}}</dt> + <dd>Returns the node upon which a popup was invoked.</dd> + <dt>{{domxref("document.tooltipNode")}}</dt> + <dd>Returns the node which is the target of the current tooltip.</dd> +</dl> + +<p>Mozilla also define some non-standard methods:</p> + +<dl> + <dt>{{domxref("document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> + <dt>{{domxref("document.getBoxObjectFor")}} {{obsolete_inline}}</dt> + <dd>Use the {{domxref("Element.getBoundingClientRect()")}} method instead.</dd> + <dt>{{domxref("document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}</dt> + <dd>Loads a <a href="/en-US/docs/XUL_Overlays" title="XUL_Overlays">XUL overlay</a> dynamically. This only works in XUL documents.</dd> + <dt>{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}</dt> + <dd>This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.</dd> +</dl> + +<h3 id="Internet_Explorer_notes">Internet Explorer notes</h3> + +<p>Microsoft defines some non-standard properties:</p> + +<dl> + <dt>{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}</dt> + <dd>Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See <a href="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx">MSDN</a>.</dd> + <dt><span style="font-weight: normal; line-height: 1.5;">Internet Explorer does not support all methods from the <code>Node</code> interface in the <code>Document</code> interface:</span></dt> +</dl> + +<dl> + <dt>{{domxref("document.contains")}}</dt> + <dd>As a work-around, <code>document.body.contains()</code> can be used.</dd> +</dl> + +<p> </p> 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> |