Document: getElementById() method

The getElementById() method of the Document interface 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 .

Note: IDs should be unique inside a document. If two or more elements in a document have the same ID, this method returns the first element found.

Syntax

getElementById(id)
  Note: 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.

`Parameters`


        
         The ID of the element to locate. The ID is a case-sensitive string which is unique within the document; only one element should 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.

`Examples`

`HTML`


         
          html

<html lang="en">
    <title>getElementById example</title>
  </head>
    <p id="para">Some text here</p>
    <button onclick="changeColor('blue');">blue</button>
    <button onclick="changeColor('red');">red</button>
  </body>
</html>

`JavaScript`

js

function changeColor(newColor) {
  const elem = document.getElementById("para");
  elem.style.color = newColor;

`Result`

        
         &lt;/div&gt;&lt;/div&gt;&lt;/section&gt;&lt;section aria-labelledby="usage_notes"&gt;&lt;h2 id="usage_notes"&gt;&lt;a href="#usage_notes"&gt;Usage notes&lt;/a&gt;&lt;/h2&gt;&lt;div class="section-content"&gt;&lt;p&gt;Unlike some other element-lookup methods such as &lt;a href="/en-US/docs/Web/API/Document/querySelector"&gt;&lt;code&gt;Document.querySelector()&lt;/code&gt;&lt;/a&gt; and &lt;a href="/en-US/docs/Web/API/Document/querySelectorAll"&gt;&lt;code&gt;Document.querySelectorAll()&lt;/code&gt;&lt;/a&gt;, &lt;code&gt;getElementById()&lt;/code&gt; is only available as a method of the global &lt;code&gt;document&lt;/code&gt; object, and &lt;em&gt;not&lt;/em&gt; 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.&lt;/p&gt;&lt;/div&gt;&lt;/section&gt;&lt;section aria-labelledby="example"&gt;&lt;h3 id="example"&gt;&lt;a href="#example"&gt;Example&lt;/a&gt;&lt;/h3&gt;&lt;div class="section-content"&gt;&lt;div class="code-example"&gt;&lt;div class="example-header"&gt;&lt;span class="language-name"&gt;html&lt;/span&gt;&lt;/div&gt;&lt;pre class="brush: html notranslate" data-signature="ENLApxaZ8qUdXkihSz5B38KFpo+NGtfxT2LmnsKDvDk="&gt;&lt;code&gt;&lt;span class="token doctype"&gt;&lt;span class="token punctuation"&gt;&amp;lt;!&lt;/span&gt;&lt;span class="token doctype-tag"&gt;doctype&lt;/span&gt; &lt;span class="token name"&gt;html&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;html&lt;/span&gt; &lt;span class="token attr-name"&gt;lang&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;en-US&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;meta&lt;/span&gt; &lt;span class="token attr-name"&gt;charset&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;UTF-8&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt; &lt;span class="token punctuation"&gt;/&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;title&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;Document&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;title&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;head&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;div&lt;/span&gt; &lt;span class="token attr-name"&gt;id&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;parent-id&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;hello word1&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt; &lt;span class="token attr-name"&gt;id&lt;/span&gt;&lt;span class="token attr-value"&gt;&lt;span class="token punctuation attr-equals"&gt;=&lt;/span&gt;&lt;span class="token punctuation"&gt;"&lt;/span&gt;test1&lt;span class="token punctuation"&gt;"&lt;/span&gt;&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;hello word2&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;hello word3&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
      &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;hello word4&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;div&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
    &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;&lt;/span&gt;script&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="token script"&gt;&lt;span class="token language-javascript"&gt;
      &lt;span class="token keyword"&gt;const&lt;/span&gt; parentDOM &lt;span class="token operator"&gt;=&lt;/span&gt; document&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token function"&gt;getElementById&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token string"&gt;"parent-id"&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
      &lt;span class="token keyword"&gt;const&lt;/span&gt; test1 &lt;span class="token operator"&gt;=&lt;/span&gt; parentDOM&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token function"&gt;getElementById&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token string"&gt;"test1"&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
      &lt;span class="token comment"&gt;// throw error&lt;/span&gt;
      &lt;span class="token comment"&gt;// Uncaught TypeError: parentDOM.getElementById is not a function&lt;/span&gt;
    &lt;/span&gt;&lt;/span&gt;&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;script&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
  &lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;body&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class="token tag"&gt;&lt;span class="token tag"&gt;&lt;span class="token punctuation"&gt;&amp;lt;/&lt;/span&gt;html&lt;/span&gt;&lt;span class="token punctuation"&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;
&lt;p&gt;If there is no element with the given &lt;code&gt;id&lt;/code&gt;, this function returns &lt;code&gt;null&lt;/code&gt;. Note that the &lt;code&gt;id&lt;/code&gt; parameter is case-sensitive, so &lt;code&gt;document.getElementById("Main")&lt;/code&gt; will return &lt;code&gt;null&lt;/code&gt; instead of the element &lt;code&gt;&amp;lt;div id="main"&amp;gt;&lt;/code&gt; because "M" and "m" are different for the purposes of this method.&lt;/p&gt;
&lt;p&gt;Elements not in the document are not searched by &lt;code&gt;getElementById()&lt;/code&gt;. When creating an element and assigning it an ID, you have to insert the element into the document tree with &lt;a href="/en-US/docs/Web/API/Node/insertBefore"&gt;&lt;code&gt;Node.insertBefore()&lt;/code&gt;&lt;/a&gt; or a similar method before you can access it with &lt;code&gt;getElementById()&lt;/code&gt;:&lt;/p&gt;
&lt;div class="code-example"&gt;&lt;div class="example-header"&gt;&lt;span class="language-name"&gt;js&lt;/span&gt;&lt;/div&gt;&lt;pre class="brush: js notranslate" data-signature="c7B55ke1SUqLRmNKyKtOrav6tTqb9qC+0/YdEDCCBlk="&gt;&lt;code&gt;&lt;span class="token keyword"&gt;const&lt;/span&gt; element &lt;span class="token operator"&gt;=&lt;/span&gt; document&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token function"&gt;createElement&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token string"&gt;"div"&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
element&lt;span class="token punctuation"&gt;.&lt;/span&gt;id &lt;span class="token operator"&gt;=&lt;/span&gt; &lt;span class="token string"&gt;"testqq"&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt;
&lt;span class="token keyword"&gt;const&lt;/span&gt; el &lt;span class="token operator"&gt;=&lt;/span&gt; document&lt;span class="token punctuation"&gt;.&lt;/span&gt;&lt;span class="token function"&gt;getElementById&lt;/span&gt;&lt;span class="token punctuation"&gt;(&lt;/span&gt;&lt;span class="token string"&gt;"testqq"&lt;/span&gt;&lt;span class="token punctuation"&gt;)&lt;/span&gt;&lt;span class="token punctuation"&gt;;&lt;/span&gt; &lt;span class="token comment"&gt;// el will be null!&lt;/span&gt;
        
       