The task is to find whether an element exists in the visible DOM or not. For that purpose, there is a number of methods used but we’re going to look at few of them.
Example-1: In this example, the element is searched by document.getElementById(‘Id’) and !! is used before selector to get the boolean result.
<!DOCTYPE HTML> <html> <head> <title> JavaScript | Check if element exists in the visible DOM. </title> </head> <body style="text-align:center;" id="body"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> Check if an Element exists in visible DOM </p> <button onclick="gfg_Run()"> check </button> <p id="GFG_DOWN" style="color:green; font-size: 23px; font-weight: bold;"> </p> <script> var el_down = document.getElementById("GFG_DOWN"); var id = 'GFG_UP'; function gfg_Run() { var element = !!document.getElementById(id); var ans = ''; if (element) { ans = "Element of id = '" + id + "' exists in visible DOM."; } else { ans = "Element of id = '" + id + "' not exists in visible DOM."; } el_down.innerHTML = ans; } </script> </body> </html> |
Output:
-
Before clicking on the button:
-
After clicking on the button:
Example-2: In this example, the element is searched by document.getElementsByClassName(‘className’) and length property is used to check whether variable contains results or not.
<!DOCTYPE HTML> <html> <head> <title> JavaScript | Check if element exists in the visible DOM. </title> </head> <body style="text-align:center;" id="body"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" class="p" style="font-size: 15px; font-weight: bold;"> Check if an Element exists in visible DOM </p> <button onclick="gfg_Run()"> check </button> <p id="GFG_DOWN" class="p" style="color:green; font-size: 23px; font-weight: bold;"> </p> <script> var el_down = document.getElementById("GFG_DOWN"); var className = 'p'; function gfg_Run() { var element = document.getElementsByClassName(className); var ans = ''; if (element.length > 0) { ans = "Element of className = '" + className + "' exists in visible DOM."; } else { ans = "Element of className = '" + className + "' not exists in visible DOM."; } el_down.innerHTML = ans; } </script> </body> </html> |
Output:
-
Before clicking on the button:
-
After clicking on the button:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
