path: root/files/nl/web/api/document/getelementbyid/index.html

---
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">&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;getElementById example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;p id="para"&gt;Some text here&lt;/p&gt;
  &lt;button onclick="changeColor('blue');"&gt;blue&lt;/button&gt;
  &lt;button onclick="changeColor('red');"&gt;red&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;</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">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="parent-id"&gt;
        &lt;p&gt;hello word1&lt;/p&gt;
        &lt;p id="test1"&gt;hello word2&lt;/p&gt;
        &lt;p&gt;hello word3&lt;/p&gt;
        &lt;p&gt;hello word4&lt;/p&gt;
    &lt;/div&gt;
    &lt;script&gt;
        var parentDOM = document.getElementById('parent-id');
        var test1=parentDOM.getElementById('test1');
        //throw error
        //Uncaught TypeError: parentDOM.getElementById is not a function
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</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>&lt;div id="main"&gt;</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>