document.getElementById()

 

Returns a reference to the element by its ID; the ID is a string which can be used to uniquely identify the element, found in the HTML id attribute.

Syntax

element = document.getElementById(id);

Parameters

id
is a case-sensitive string representing the unique ID of the element being sought.

Return Value

element
is a reference to an Element object, or null if an element with the specified ID is not in the document.

Example

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

Notes

New users should note that the capitalization of 'Id' in the name of this method must be correct for the code to function; "getElementByID" does not work, however natural it may seem.

Unlike some other similar methods, getElementById is only available as a method of the global document object, and not available as a method on all element objects in the DOM. Because ID values must be unique throughout the entire document, there is no need for "local" versions of the function.

Example

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

If there is no element with the given id, this function returns null. Note that the id parameter is case-sensitive, so document.getElementById("Main") will return null instead of the element <div id="main"> because "M" and "m" are different for the purposes of this method.

Elements not in the document are not searched by getElementById(). When creating an element and assigning it an ID, you have to insert the element into the document tree with Node.insertBefore() or a similar method before you can access it with getElementById():

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

Non-HTML documents. The DOM implementation must have information that says which attributes are of type ID. Attributes with the name "id" are not of type ID unless so defined in the document's DTD. The id attribute is defined to be of ID type in the common cases of XHTML, XUL, and other. Implementations that do not know whether attributes are of type ID or not are expected to return null.

Specification

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)
Basic support 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
Basic support 1.0 (Yes) 1.0 (1.0) 6.0 6.0 1.0

See also

  • Document reference for other methods and properties you can use to get references to elements in the document.
  • Document.querySelector() for selectors via queries like 'div.myclass'
  • xml:id - has a utility method for allowing getElementById() to obtain 'xml:id' in XML documents (such as returned by Ajax calls)

Document Tags and Contributors

Tags: 
 Contributors to this page: levytskyi, chrisdavidmills, Pointy, nmve, erikadoyle, carloque, AndySky21, bananer, Broszhu, Trajanson, l2aelba, Konrud, Sheppy, madarche, Jeremie, teoli, MHasan, Granjow, sudheesh001, kscarfone, Khodaidad_Basharmand, ethertank, Nickolay, McGurk, paul.irish, zgardnerallofe, scally77, Brettz9, Foghawk, Llimousin, Potappo, Liwei, DBaron, Mh512, Katzlbt, Mgjbot, Mstipich, Jabez, Ptak82, Jonnyq, BenoitL, Dria, Arthit, Pmsyyz, JesseW
 Last updated by: levytskyi,