The **`getElementById()`** is a JavaScript function that lets you grab an HTML element, by its `id`, and perform an action on it. The name of the `id` is passed as a parameter, and ​the corresponding element is the return value.

The following code shows how the function can be used. The color of the box, with the content `id`, ​changes once the action button is clicked. 

#content{
    height:100px;
    width:100px;
    background-color: cyan;
    color: black;
    padding: 2em;
}

<html>
 <head>
 </head>
 <body>

  <div id="content"/> This box will change </div> 
  <button onclick="color_change()"> Action! </button>

</body>
</html>

function color_change(){ //The function called whenever the button is clicked
  var block = document.getElementById("content"); //The getElementById() call
  block.style.backgroundColor="black"; //Changing properties of the element
  block.style.color="white";
}


codemirror

What is the getElementByID method() in JavaScript?

The getElementById() is a JavaScript function that lets you grab an HTML element, by its id, and perform an action on it. The name of the id is passed as a parameter, and ​the corresponding element is the return value. 