What is the DOM property tagName?

Overview

In this shot we will learn about the DOM property which returns the tag name of the element, tagName. It returns the name of the tag, when applied to the element object.

You can get the object of the element by using getElementById() or getElementByClass(), and then apply this property to it. The returned value is always in uppercase and a string. You can’t set this property, as it is read-only.

Code

We will write HTML code to find the tagName of the element.

Console

Code explanation

  • In line 5, we define a DIV element with an ID = div. It will be used to get the element and apply the property tagName.

  • In line 7, we write a button tag with a function change(), which will be called when the user clicks on it.

  • In line 10, in the script tag, we write the JavaScript code. We defined a function change(), which will be called by a click on the button from the HTML page.

  • In line 11, we get the div element with ID ‘div’ using getElementById() and store it in the variable.

  • In line 12, we apply the property tagName on the above variable x, which is the div element. The property will return the tagName of the element.

  • In line 13, we will print the tag name we got in the above step.

Output

We got the desired output, which is DIV, the tag name of the element with ID div.

Free Resources