In this shot, we are going to learn about a method that helps find the DOM element so that we can use it to change the element according to our needs.

There are different methods that you can use to get DOM elements. In this shot, we are going to use **`document.getElementById()`**, which returns a DOM element. The element contains different properties that define its behavior. If the method does not find any element in DOM with the specified ID, then it returns null.

var element = document.getElementById('ID');

#   
## Parameters

`getElementById(ID)` takes a parameter of type string. `ID` is given to an HTML element that is unique for that element. This unique ID helps in searching for the required element in the DOM tree.
In the code below, we assign a unique ID to an element.  

In the `<p>` HTML tag above, we use the `id` attribute to assign an ID. IDs are case-sensitive, which means "Test" and "test" are different IDs. Check the code below to get the `<p>` element.

//correct
var element = document.getElementById("Test");

//wrong "test" should be "Test"
var element = document.getElementById("test"); 

In the code below, we are trying to get the element with ID `intro3`, and no element in the HTML page has ID `intro3`. After we store the value returned by `getElementById`, we use `console.log()` to display it on the console. As expected, the output is null.

<html>
 <head>
 </head>
 <body>
   <div id="intro"/>
   <p id="intro2">To check out JavaScript code switch to the next tab</p>
 </body>
</html>

const element1 = document.getElementById('intro2');
const element2 = document.getElementById('intro3');
console.log('output for unknown id',element2)
console.log('output for known id',element1)
// document.getElementById('intro2').innerHTML = element;


codemirror

console

Now, we will try to use the `getElementById()` method to change the color of an element with the click of a button.

The HTML page only has two elements: a paragraph and a button. The task is to change the color of the paragraph element (Hey, Hello) when we click on the button (Click Here!!!).

In JavaScript:
* In line 1,  we use `document.getElementById('test')` to get the element. `test` is the ID given to `<p>` element. The method returns an object and stores it in a variable named `element`.

* In line 4, we have a function, `change()`, which will be called when we click on the button.

* In line 5, we use the element object to change the element property. We use `element.style.color`;
`element` is the object that has the style property. `style` has several properties, one of which is `color`.   


<html>
 <head>
 </head>
 <body>
   <p id='test'>Hey, Hello</p>
   <button onclick="change()">Click Here!!!</button>
 </body>
</html>

const element = document.getElementById('test');
console.log(element)

function change(){
    element.style.color = 'red';
}

What is document.getElementById() in JavaScript?

In this shot, we are going to learn about a method that helps find the DOM element so that we can use it to change the element according to our needs. There are different methods that you can use to get DOM elements. In this shot, we are going to use document.getElementById(), which returns a DOM element. The element contains different properties that define its behavior. If the method does not find any element in DOM with the specified ID, then it returns null. 

What is document.getElementById() in JavaScript?

Syntax

Parameters