Skip to content
Related Articles

Related Articles

How to get the type of DOM element using JavaScript?
  • Last Updated : 12 Sep, 2019

The task is to get the type of DOM element by having its object reference. Here we are going to use JavaScript to solve the problem.
Approach 1:

  • First take the reference of the DOM object to a variable(Here, In this example an array is made of IDs of the element, then select random ID and select that particular element).
  • Use .tagName property to get the element name.

Example 1: This example using the appraoach discussed above.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to get the type of DOM 
      element using JavaScript?
    </title>
</head>
<center>
  
    <body style="text-align:center;">
        <h1 id="h1" style="color:green;">  
        GeeksForGeeks  
    </h1>
        <p id="GFG_UP" 
           style="font-size: 15px;
                  font-weight: bold;">
        </p>
        <button id="button" onclick="GFG_Fun()">
            click here
        </button>
        <p id="GFG_DOWN" 
           style="font-size: 24px; 
                  font-weight: bold; 
                  color: green;">
        </p>
        <script>
            var up = document.getElementById('GFG_UP');
            var down = document.getElementById('GFG_DOWN');
            var arr = ["h1", "GFG_UP", "button", "GFG_DOWN"];
            up.innerHTML =
              "Click on the button to check the type of element.";
  
            function GFG_Fun() {
                var id = arr[Math.floor(Math.random() * arr.length)];
                down.innerHTML = 
                  "The type of element of id = '" + id + "' is " 
                + document.getElementById(id).tagName;
            }
        </script>
    </body>
</center>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

Approach 2:

  • First take the reference of the DOM object to a variable(Here, In this example an array is made of IDs of the element, then select random ID from the array and select that particular element).
  • Use .nodeName property to get the element name.

Example 2: This example using the approach discussed above.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to get the type of 
      DOM element using JavaScript?
    </title>
</head>
<center>
  
    <body style="text-align:center;">
        <h1 id="h1" style="color:green;">  
        GeeksForGeeks  
    </h1>
        <p id="GFG_UP" 
           style="font-size: 15px;
                  font-weight: bold;">
        </p>
        <button id="button" onclick="GFG_Fun()">
            click here
        </button>
        <p id="GFG_DOWN"
           style="font-size: 24px; 
                  font-weight: bold; 
                  color: green;">
        </p>
        <script>
            var up = document.getElementById('GFG_UP');
            var down = document.getElementById('GFG_DOWN');
            var arr = ["h1", "GFG_UP", "button", "GFG_DOWN"];
            up.innerHTML = 
              "Click on the button to check the type of element.";
  
            function GFG_Fun() {
                var id = arr[Math.floor(Math.random() * arr.length)];
                down.innerHTML =
                  "The type of element of id = '" + id + "' is " 
                + document.getElementById(id).nodeName;
            }
        </script>
    </body>
</center>
  
</html>

Output:

  • Before clicking on the button:
  • After clicking on the button:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :