Document.getElementById()

The Document method getElementById() returns an Element object representing the element whose id property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.

If you need to get access to an element which doesn't have an ID, you can use querySelector() to find the element using any selector.

Syntax

var element = document.getElementById(id);

Parameters

id
The ID of the element to locate. The ID is case-sensitive string which is unique within the document; only one element may have any given ID.

Return value

An Element object describing the DOM element object matching the specified ID, or null if no matching element was found in the document.

Example

HTML

<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

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

Result

Usage notes

The capitalization of "Id" in the name of this method must be correct for the code to function; getElementByID() is not valid and will not work, however natural it may seem.

Unlike some other element-lookup methods such as Document.querySelector() and Document.querySelectorAll(), 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
getElementByIdChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 5.5Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0

Thank you!

Report sent

What happens next?

Our team will review your report. Once we verify the information you have supplied we will update this browser compatability table accordingly.

Can I keep track of my report?

You can join the GitHub repository to see updates and commits for this table data:

https://github.com/mdn/browser-compat-data

Tell us what’s wrong with this table

Our goal is to provide accurate, real values for all our compatibility data tables. Notifying MDN of inaccurate data or supplying new data pushes us further towards our goal of providing 100% real values to the developer community.
Thank you for helping.

1Which browsers are affected?
Please select the browser or browsers which are affected.
Chrome
Edge
Firefox
Internet Explorer
Opera
Safari
Android webview
Chrome for Android
Firefox for Android
Opera for Android
Safari on iOS
Samsung Internet
2Which table row is affected?
3Can you provide a brief explanation?
Briefly outline the issue you are highlighting. Minimum 10 and maximum 1,000 characters.
4Do you have any supporting material?
Optional
Browser documentation and release notes are good supporting items to accompany your message. A demo hosted on services like Codepen or JSBin are perfect for providing real examples of your findings.
Connection error:Sorry, we can’t seem to reach the server. We are working to fix the problem. Please try again later.

Legend

Full support  
Full support

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)