jQuery: Get selected element tag name

Question

Is there an easy way to get a tag name?

For example, if I am given $('a') into a function, I want to get 'a'.

possible duplicate of [Does jQuery have any function to determine the tag type of the DOM element(s) referenced by jQuery object?](http://stackoverflow.com/questions/5113386/does-jquery-have-any-function-to-determine-the-tag-type-of-the-dom-elements-ref) — Darko, Mar 18 '11 at 02:35

score 1134 · Accepted Answer · edited Aug 13 '14 at 16:32

1134

You can call .prop("tagName"). Examples:

jQuery("<a>").prop("tagName"); //==> "A"
jQuery("<h1>").prop("tagName"); //==> "H1"
jQuery("<coolTagName999>").prop("tagName"); //==> "COOLTAGNAME999"

If writing out .prop("tagName") is tedious, you can create a custom function like so:

jQuery.fn.tagName = function() {
  return this.prop("tagName");
};

Examples:

jQuery("<a>").tagName(); //==> "A"
jQuery("<h1>").tagName(); //==> "H1"
jQuery("<coolTagName999>").tagName(); //==> "COOLTAGNAME999"

Note that tag names are, by convention, returned CAPITALIZED. If you want the returned tag name to be all lowercase, you can edit the custom function like so:

jQuery.fn.tagNameLowerCase = function() {
  return this.prop("tagName").toLowerCase();
};

Examples:

jQuery("<a>").tagNameLowerCase(); //==> "a"
jQuery("<h1>").tagNameLowerCase(); //==> "h1"
jQuery("<coolTagName999>").tagNameLowerCase(); //==> "cooltagname999"

edited Aug 13 '14 at 16:32

rgajrawala

2,148
1
22
35

answered Mar 18 '11 at 02:22

tilleryj

14,259
3
23
22

20

AS of jQuery 1.6, this should be `.prop`. – gen_Eric Apr 16 '12 at 16:12
3

Is the capitalisation convention followed by all browsers? If not, does jQuery normalise this? – callum Sep 04 '13 at 16:05
8

tagName is part of the DOM spec and is always capitalized. – tilleryj Sep 05 '13 at 20:28
Note that the string that's returned is in CAPITAL LETTERS. This'll be a gotcha if you're trying to compare it to "div" or "a" for example. – Hartley Brody Apr 29 '14 at 23:41
3

using `toLowerCase()` or `toUpperCase()` may be helpful when comparing `prop('tagName')` result to a tag name. `if($("my_selector").prop("tagName").toLowerCase() == 'div')` or `if($("my_selector").prop("tagName").toUpperCase() == 'DIV')` – S.Thiongane Jun 04 '14 at 14:39
In reply to @tilleryj's reply, capitalized should be camelCase'd. In any case, to sum up: - DOM spec props are always camelCase - The return is in uppercase; use .toLowerCase() to compare to e.g. 'div' or 'select' - Best practice is using .prop('tagName') as jQuery prevents JS errors – ReSpawN Jan 15 '15 at 15:08
@tilleryj "Note that tag names are, by convention, returned CAPITALIZED" - no, they are returned in **all capitals**. Capitalisation implies only the first letter to be capital, while other letters in lower case. – Asu Oct 26 '15 at 06:49
can anyone tell me how to get the tag name from the "
" type. actually I am looping through all th content inside body tag and I need all the tag names inside it and there ids and classes.
– thedudecodes Oct 06 '17 at 11:32
I downvoted instead of upvoted by mistake and now I can't change it — sorry @tilleryj! – texelate May 10 '18 at 05:06
Working Fine :) – Thulasiram Jul 17 '20 at 08:42

score 103 · Answer 2 · edited Jun 02 '18 at 03:15

103

You can use the DOM's nodeName property:

$(...)[0].nodeName

edited Jun 02 '18 at 03:15

GetFree

40,278
18
77
104

answered Mar 18 '11 at 02:22

SLaks

868,454
176
1,908
1,964

Thanks. Works great - although I'll use the more jQueryish version because I'm in a jQuery world at the moment. – configurator Mar 18 '11 at 02:28
6

pure JS solutions (like this one) are generally superior to jQuery ones especially if they do not suffer from browser compatibility problems or are much more verbose. – Steven Lu Jul 25 '12 at 16:24
26

... and specifically because of those browser incompatibility issues, the jQuery ones are often superior if someone is picking a solution and isn't well-versed in what browser-incompatibilities to watch out for. ;) – Scott Stafford Aug 22 '12 at 13:37
4

I consider this superior because it doesn't matter what the jQuery version is, this solution works on all versions. +1 – Stijn de Witt Sep 24 '12 at 14:54
7

particularly if you are in a each()-like situation, where you have to cast the element back to a jquery object to get a property that was already there, like `$(this).prop('tagname')`. this.nodeName is often more efficient. +1 – commonpike Nov 29 '12 at 12:24
I think this should of been the accepted answer. There arent any browser compatibility issues, its faster and simpler. – Jevon Jan 17 '20 at 21:54

score 62 · Answer 3 · answered Dec 02 '11 at 10:57

62

As of jQuery 1.6 you should now call prop:

$target.prop("tagName")

See http://api.jquery.com/prop/

answered Dec 02 '11 at 10:57

Rob

621
5
2

score 53 · Answer 4 · edited Mar 11 '21 at 22:32

53

jQuery 1.6+

jQuery('selector').prop("tagName").toLowerCase()

Older versions

jQuery('selector').attr("tagName").toLowerCase()

toLowerCase() is not mandatory.

edited Mar 11 '21 at 22:32

SwissCodeMen

4,222
8
24
34

answered Jan 19 '12 at 14:27

Dayron Gallardo

1,502
2
21
37

Why are you doing `new String`? – gen_Eric Apr 16 '12 at 16:14
Because toLowerCase() is a method of String – Dayron Gallardo Apr 25 '12 at 13:35

score 26 · Answer 5 · answered Mar 02 '12 at 19:04

26

This is yet another way:

$('selector')[0].tagName

answered Mar 02 '12 at 19:04

Chepech

5,258
4
47
70

Nice one! Clearer than nodeName and even shorter. :P – Dennis98 Oct 22 '15 at 12:41

John Slegers · Answer 6 · 2022-04-12T14:44:09.057

You should NOT use jQuery('selector').attr("tagName").toLowerCase(), because it only works in older versions of Jquery.

You could use $('selector').prop("tagName").toLowerCase() if you're certain that you're using a version of jQuery thats >= version 1.6.

Note :

You may think that EVERYONE is using jQuery 1.10+ or something by now (January 2016), but unfortunately that isn't really the case. For example, many people today are still using Drupal 7, and every official release of Drupal 7 to this day includes jQuery 1.4.4 by default.

So if do not know for certain if your project will be using jQuery 1.6+, consider using one of the options that work for ALL versions of jQuery :

Option 1 :

jQuery('selector')[0].tagName.toLowerCase()

Option 2

jQuery('selector')[0].nodeName.toLowerCase()

score 2 · Answer 7 · answered May 22 '20 at 23:26

2

nodeName will give you the tag name in uppercase, while localName will give you the lower case.

$("yourelement")[0].localName

will give you : yourelement instead of YOURELEMENT

answered May 22 '20 at 23:26

Donovan P

591
5
9

score 0 · Answer 8 · answered Mar 27 '22 at 08:48

0

get clicked tag name with jQuery

jQuery("YOUR_SELECTOR").click(function (e) {
     console.log(jQuery(e.target).prop("tagName").toLowerCase())
})

answered Mar 27 '22 at 08:48

Mahdi Bashirpour

17,147
12
117
144

jQuery: Get selected element tag name

8 Answers8

Note :

get clicked tag name with jQuery

Linked

Related