JavaScript | Check if element exists in the visible DOM

0 0 2 minutes read

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, zambiatek 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!