HTML - DOM Element tagName Property

Quiz

The HTML DOM element tagName property is used to retrieve (get) the tag name present in the HTML document that defines an element on the web page.

The returned tag name of an element will be in string format with characters in uppercase letters. For example, if we have a <div> element, the returned tag name will be DIV.

Syntax

Following is the syntax of the HTML DOM Element tagName property −

element.tagName;

Parameters

Since this is a property, it will not accept any parameter.

Return Value

This property returns a string value that holds the name of the HTML tag of the element in "uppercase letters".

Example 1: Getting the Tag Name of a Div Element

The following program demonstrates the usage of the HTML DOM Element tagName property. It retrieves the tag name of the <div> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element tagName</title>
</head>
<body>
<h3>HTML DOM Element tagName Property</h3>
<div id="myDiv">Click the button to get My tag Name!!</div>
<br>
<button onclick="getTagName()">Get Tag Name</button> 
<p id="t_Dis"></p>
<script> 
   function getTagName() {
      var divEle = document.getElementById('myDiv');
      // Get the tag name and display it
      var tagName = divEle.tagName;
      document.getElementById('t_Dis').innerHTML ='Tag name: ' + tagName;  
   }
</script>
</body>
</html>

The above program displays the tag name of the "div" element when the button is clicked.

Example 2: Retrieving all Tag Names

The following is another example of the HTML DOM element tagName property. We use this property inside a for loop to retrieve the tag names of all elements present in the current document −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>HTML DOM Element tagName</title>
</head>
<body>
<h3>HTML DOM Element tagName Property</h3>
<div id="myDiv">Click the button to get the tag name of all elements</div>
<br>
<button onclick="getTagName()">Get all tag names</button> 
<p id="res"></p>
<script> 
   function getTagName() {
      var all_ele = document.querySelectorAll('*');
      let result = document.getElementById("res");
      result.innerHTML = "";
      for(let i = 0; i < all_ele.length; i++){
         result.innerHTML += all_ele[i].tagName + "<br>";
      }  
   }
</script>
</body>
</html>

When the button is clicked all the tag names will be displayed.

Example 3: Handling Different Tag Names Dynamically

The example below uses a function to access and dynamically display the tag name of the clicked button in a paragraph element (<p>) −

<!DOCTYPE html>
<html lang="en">
<head> 
<title>TagName Property Example</title>
</head>
<body>
<h3>HTML DOM Element tagName Property</h3>
<h4>Click a button to get its tag name:</h4>
<button onclick="getTagName(this)">Button 1</button>
<button onclick="getTagName(this)">Button 2</button>
<button onclick="getTagName(this)">Button 3</button>
<p id="t_Dis"></p>
<script>
   // Function to get and display the tag name
   function getTagName(element) {
      var tagName = element.tagName;
      var buttonText = element.textContent;
      document.getElementById('t_Dis').textContent = 
	  'Tag Name of ' + buttonText + ': ' + tagName; 
   }
</script>
</body>
</html>

The above program displays the tag name of the clicked button.

Supported Browsers

Property
tagName	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page