

In this shot, we will learn how to get the active element of the HTML page. The HTML DOM property **`document.activeElement`** helps us find the active element.

>**Active Elements** are the HTML elements that have recently been focused on by the user. If a user clicks on a button that means the button was focused or it was active.


# 
## Syntax

## Return value

The `document.activeElement` property will return the HTML element object that was focused.

## Code

We will try to display the active element of the HTML page using the `document.activeElement` property.

<!DOCTYPE html>
<html>
  <head>
    <script>
      function myFunction() {
        var x = document.activeElement.tagName;
        document.getElementById("demo").innerHTML = x;
      }
    </script>
  </head>
<body onclick="myFunction()">

<p> Click on the element to display the active element.Click here "P" </p>
<input type = "text" value = "This is a INPUT element">
<button> A Button </button>
<p id = "demo"></p>
</body>
</html>

codemirror

## Explanation 

* In lines 4 to 9, we defined a function named `myFunction()` in the `<script>` tag. 
 
* In line 6, we used the HTML DOM property `document.activeElement` to get the reference of the active element (which is recently or currently in focus). Focus means you have last element you have used or clicked. The returned object has several attributes; one of them is `tagName`, which holds the name (type) of element and assigns it to the `x` variable. 

* In line 7, using `innerHTML` to change the text in the `<p>` tag with id `demo`, within which we assign the value we stored in variable `x`.



What is the HTML activeElement property?

The document.activeElement property returns the focused HTML element, useful for identifying the currently active element.