--- title: document.getElementById() slug: Web/API/Document/getElementById tags: - API - DOM - Document - Elementen - Method - Reference - Web - getElementById - id translation_of: Web/API/Document/getElementById ---
{{ ApiRef("DOM") }}

Returnt een DOM-referentie naar een element aan de hand van de ID; de ID is een string die gebruikt kan worden om een element de identificeren, door middel van het HTML-attribuut id.

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")}}.

Syntax

var element = document.getElementById(id);

Parameters

id
is een hoofdlettergevoelige string die overeenkomt met de unieke ID van het element dat gezocht wordt.

Return Value

element
is een DOM-referentie naar een {{domxref("Element")}}-object, of null als het element met het gespecificeerde ID niet in het document voorkomt.

Voorbeeld

HTML Content

<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>

JavaScript Content

function changeColor(newColor) {
  var elem = document.getElementById('para');
  elem.style.color = newColor;
}

Result

{{ EmbedLiveSample('Example1', 250, 100) }}

Notities

Let op dat "Id" in "getElementById" hoofdlettergevoelig is, en correct geschreven moet zijn om te werken. "getElementByID" zal niet werken, hoewel deze manier van schrijven natuurlijk lijkt.

In tegenstelling tot andere methods die erop lijken, is getElementById alleen beschikbaar als method op het globale document-object, en niet 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.

Voorbeeld

<!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>

Als er geen element bestaat met de gespecificiëerde id, geeft deze functie null. Let op: de id-parameter is hoofdlettergevoelig, dus document.getElementById("Main") zal null geven, in plaats van het element <div id="main">, omdat "M" en "m" verschillend zijn in deze method.

Elementen die niet in het document staan, zullen niet gezocht worden door getElementById(). 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 getElementById() er toegang toe heeft.

var element = document.createElement('div');
element.id = 'testqq';
var el = document.getElementById('testqq'); // el will be null!

Niet-HTML documenten. 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 id is gedefiniëerd als type ID in de gevallen van onder andere XHTML en XUL. Implementaties die niet als type ID gedefiniëerd zijn, returnen null.

Specificatie

Specification Status Comment
{{SpecName('DOM1','level-one-html.html#method-getElementById','getElementById')}} {{Spec2('DOM1')}} Initial definition for the interface
{{SpecName('DOM2 Core','core.html#ID-getElBId','getElementById')}} {{Spec2('DOM2 Core')}} Supersede DOM 1
{{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}} {{Spec2('DOM3 Core')}} Supersede DOM 2
{{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}} {{Spec2('DOM WHATWG')}} Intend to supersede DOM 3

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basisondersteuning 1.0 {{CompatVersionUnknown}} {{ CompatGeckoDesktop(1.0) }} 5.5 7.0 1.0
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basisondersteuning 1.0 {{CompatVersionUnknown}} {{ CompatGeckoMobile(1.0) }} 6.0 6.0 1.0

Zie ook