Skip to content
Related Articles

Related Articles

JavaScript | Check if element exists in the visible DOM
  • Last Updated : 20 May, 2019

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:



My Personal Notes arrow_drop_up
Recommended Articles
Page :