Deze vertaling is niet volledig. Help dit artikel te vertalen vanuit het Engels.

 

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.

Syntax

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

Notities

Let op dat "Id" in "getElementById" hoofdlettergevoelig is, en correct geschreven moet zijn om te werken. "getElementByID" zal niet werken, hoe natuurlijk deze manier van schrijven ook 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, returnt deze functie null. Let op: de id-parameter is hoofdlettergevoelig, dus document.getElementById("Main") zal null returnen, 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 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
Document Object Model (DOM) Level 1 Specification
The definition of 'getElementById' in that specification.
Obsolete Initial definition for the interface
Document Object Model (DOM) Level 2 Core Specification
The definition of 'getElementById' in that specification.
Obsolete Supersede DOM 1
Document Object Model (DOM) Level 3 Core Specification
The definition of 'getElementById' in that specification.
Obsolete Supersede DOM 2
DOM
The definition of 'getElementById' in that specification.
Living Standard Intend to supersede DOM 3

Browser compatibility

  
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basisondersteuning 1.0 (Yes) 1.0 (1.7 or earlier) 5.5 7.0 1.0
  
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basisondersteuning 1.0 (Yes) 1.0 (1.0) 6.0 6.0 1.0

Zie ook

  • Document referentie voor andere methods en properties die je kunt gebruiken om naar elementen te refereren.
  • Document.querySelector() voor selectors via queries als 'div.myclass'
  • xml:id - heeft een utility method om getElementById()  'xml:id' in XML documenten te laten ontvangen (zoals gereturned door Ajax calls)

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: DaanWeijers
 Laatst bijgewerkt door: DaanWeijers,