Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!




<!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 :