How Do I Find out Which Dom Element Has the Focus?

How do I find out which DOM element has the focus?

Finding out which DOM element has focus can be done in a few different ways, depending on the type of element you are dealing with. We’ll look at the three main types of elements and discuss how to find out which one has focus.

Input Elements

For input elements such as text boxes, checkboxes, and radio buttons, the easiest way to find out which one has focus is to use the document.activeElement property. This returns the DOM element that currently has focus. Here’s an example:

let activeElement = document.activeElement;
console.log(activeElement);

Links

For links, you can use the document.querySelector method to find the link that has focus. Here’s an example:

let activeLink = document.querySelector("a:focus");
console.log(activeLink);

Other Elements

For elements such as divs, spans, and other non-input elements, you can use the document.querySelector method to find the element that has focus. Here’s an example:

let activeElement = document.querySelector(":focus");
console.log(activeElement);

Using these methods, you can easily find out which DOM element has the focus.