How to get tag name of an element in jQuery

On:

What is tag name ?

There are various types of HTML elements such as input elements, anchor tags, drop downs etc. Each element has a unique syntax by which it is defined and identified. This syntax is its tag name. For Example, an input element is defined using <input> tag, anchor element by <a> tag, drop down by <select> tag and so on.

You can easily select an element in jQuery by its id or class using # (hash) or . (dot) operators. But how will you get the tag name of the selected element. Read on !!!

Let’s define a sample HTML code which shall be used in the given examples :

<html>
<body>
<input id=”textInput” class=”codippa”/>
<a href=”#” class=”codippa”>Want Some Code!!!</a>
<body>
<html>

Method 1 : Using tagName property of element directly

Select the element using any of the selector (either id or class) and use tagName property of the element to get the tag of that element. Referring the above HTML code, this is how we can get the tag names of both the elements given in it :

$("#textInput").tagName;
$(".codippa").tagName;

Output will be :

INPUT
A

If there are more than one elements matching the given selector such as when using the class selector most probably more than one element will be fetched. In those cases get the tag of the desired element using the index of element. This can be done using either of the following ways :

  1. $(“.codippa”)[0].tagName;
  2. $(“.codippa”).get(0).tagName;

Method 2 : Using nodeName property of element

Select the element using any of the selector (either id or class) and use nodeName property of the element to get the tag of that element. Following code gets the tag names of the elements defined in the above HTML :

$("#textInput").nodeName;
$(".codippa").nodeName;

Output will be :

INPUT
A

If there are more than one elements matching the given selector such as when using the class selector most probably more than one element will be fetched. In those cases get the tag of the desired element using the index of element. This can be done using either of the following ways :

  1. $(“.codippa”)[0].nodeName;
  2. $(“.codippa”).get(0).nodeName;

Method 3 : Using tagName property of element through prop method

Select the element whose tag is required using jQuery’s id or class selectors and the call propmethod passing in tagNameproperty as :

$("#textInput").prop("tagName");
$(".codippa").prop("tagName");

As before if there are more than one element matching the given selector then select it using index as :

  1. $(“.codippa”)[0].prop(“tagName”);
  2. $(“.codippa”).get(0).(“tagName”);

Output will be :

INPUT
A

Let’s tweak in :

  1. Method 3 should only be applied when the jQuery version being used is 1.6 or greater.
  2. All the above methods return tag names in upper case letters. Call toLowerCase()method on the returned value to get the tag names in lower case.

Add some more methods to the above list by commenting below. coDippa !!!

Leave a Reply