document.getElementById

  • Revision slug: DOM/document.getElementById
  • Revision title: document.getElementById
  • Revision id: 63864
  • Created:
  • Creator: McGurk
  • Is current revision? No
  • Comment Added browser compatibility; 16 words added, 36 words removed

Revision Content

{{ DomRef() }}

Summary

Returns a reference to the element whose ID is specified.

Syntax

element = document.getElementById(id);

where

  • element is a reference to an element object.
  • id is a case-sensitive string representing the unique ID of the element being sought.

Example

<html>
<head>
<title>getElementById example</title>

<script type="text/javascript">

function changeColor(newColor)
{
 var elem = document.getElementById("para1");
 elem.style.color = newColor;
}
</script>
</head>

<body>
<p id="para1">Some text here</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>
</html>

Notes

If there is no element with the given id, this function returns null. Note also that 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.

Simply creating an element and assigning an ID will not make the element accessible by getElementById. Instead one needs to insert the element first into the document tree with insertBefore or a similar method, probably into a hidden div.

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

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

getElementById was introduced in DOM Level 1 for HTML documents and moved to all documents in DOM Level 2.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{ CompatGeckoDesktop("1") }} 5.5 7.0 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatGeckoMobile("1") }} 6.0 6.0 1.0

Specification

See also

  • xml:id - has a utility method for allowing getElementById to obtain 'xml:id' in XML documents (such as returned by Ajax calls)

{{ languages( { "fr": "fr/DOM/document.getElementById", "ja": "ja/DOM/document.getElementById", "pl": "pl/DOM/document.getElementById" } ) }}

Revision Source

<p>{{ DomRef() }}</p>
<h3 name="Summary">Summary</h3>
<p>Returns a reference to the element whose ID is specified.</p>
<h3 name="Syntax">Syntax</h3>
<pre class="eval"><em>element</em> = document.getElementById(<em>id</em>);
</pre>
<p>where</p>
<ul> <li><code>element</code> is a reference to an <a href="/en/DOM/element" title="en/DOM/element">element</a> object.</li> <li><code>id</code> is a case-sensitive string representing the unique ID of the element being sought.</li>
</ul>
<h3 name="Example">Example</h3>
<pre class="brush: html">&lt;html&gt;
&lt;head&gt;
&lt;title&gt;getElementById example&lt;/title&gt;

&lt;script type="text/javascript"&gt;

function changeColor(newColor)
{
 var elem = document.getElementById("para1");
 elem.style.color = newColor;
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;p id="para1"&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 name="Notes">Notes</h3>
<p>If there is no element with the given id, this function returns <code>null</code>. Note also that 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 <code>id</code> attribute is defined to be of ID type in the common cases of <a href="/en/XHTML" title="en/XHTML">XHTML</a>, <a href="/en/XUL" title="en/XUL">XUL</a>, and other. Implementations that do not know whether attributes are of type ID or not are expected to return <code>null</code>.</p>
<p>Simply creating an element and assigning an ID will not make the element accessible by <code>getElementById</code>. Instead one needs to insert the element first into the document tree with <code><a href="/En/DOM/Node.insertBefore" title="En/DOM/Node.insertBefore">insertBefore</a></code> or a similar method, probably into a hidden div.</p>
<pre class="brush: js">var element = document.createElement("div");
element.id = 'testqq';
var el = document.getElementById('testqq'); // el will be null!
</pre>
<p>New users should note that the capitalization of 'Id' <em>must</em> be correct for the code to function - 'getElementByID' does <em>not</em> work, however natural it may seem.</p>
<p><code>getElementById</code> was introduced in DOM Level 1 for HTML documents and moved to all documents in DOM Level 2.</p>
<h3 name="Browser_Compatibility">Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td>{{ CompatGeckoDesktop("1") }}</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>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>1.0</td> <td>{{ CompatGeckoMobile("1") }}</td> <td>6.0</td> <td>6.0</td> <td>1.0</td> </tr> </tbody> </table>
</div>
<h3 name="Specification">Specification</h3>
<ul> <li>DOM Level 2 Core Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBId">getElementById</a></li>
</ul>
<h3 name="See_also">See also</h3>
<ul> <li><a href="/en/xml/xml:id" title="en/xml/id">xml:id</a> - has a utility method for allowing getElementById to obtain 'xml:id' in XML documents (such as returned by Ajax calls)</li>
</ul>
<p>{{ languages( { "fr": "fr/DOM/document.getElementById", "ja": "ja/DOM/document.getElementById", "pl": "pl/DOM/document.getElementById" } ) }}</p>
Revert to this revision