Difference between .tagName and .nodeName

Question

What is the difference between $('this')[0].nodeName and $('this')[0].tagName?

Stealage

This question is more of a dom question because it isn't specific to jquery. – Tearjerker

Answer 1

The tagName property is meant specifically for element nodes (type 1 nodes) to get the type of element.

There are several other types of nodes as well (comment, attribute, text, etc.). To get the name of any of the various node types, you can use the nodeName property.

When using nodeName against an element node, you'll get its tag name, so either could really be used, though you'll get better consistency between browsers when using nodeName.

Nottingham

Answer 2

This is a pretty good explanation of the difference between the two.

---

Added text from the article:

tagName and nodeName are both useful Javascript properties for checking the name of an html element. For most purposes, either will do fine but nodeName is preferred if you are supporting only A-grade browsers and tagName is preferred if you intend to support IE5.5 as well.

There are two issues with tagName:

• In all versions of IE, tagName returns ! when called on a comment node
• For text nodes, tagName returns undefined whereas nodeName returns #text

nodeName has its own set of issues but they are less severe:

• IE 5.5 returns ! when called on a comment node. This is less harmful than tagName which suffers from this behaviour across all versions of IE
• IE 5.5 doesn’t support nodeName for the document element or for attributes. Neither of these should be a concern for most practical purposes but should be kept in mind in any case
• Konqueror ignores comment nodes when using this property. But then again, Konqueror, along with IE 5.5 is not an A-grade browser

So for most practical purposes stick to nodeName due to its support for a wider range of scenarios and potentially better forward compatibility. Not to mention that it doesn’t hiccup on a comment node, which has a tendency to creep into code unannounced. Don’t worry about IE 5.5 or Konqueror as their market share is near 0%.

Deconsecrate

Answer 3

Read about those properties in the DOM Core spec.

nodeName is a property defined in the Node interface
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095

tagName is a property defined in the Element interface
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815

btw the Node interface is implemented by every node in the DOM tree (including the document object itself). The Element interface is implemented only by those nodes in the DOM tree that represent elements in an HTML document (nodes with nodeType === 1) .

Obola

Answer 4

And this is what happens on Firefox 33 and Chrome 38:

HTML:

<div class="a">a</div>

Js:

node = e
node.nodeType === 1
node.nodeName === 'DIV'
node.tagName  === 'DIV'

node = e.getAttributeNode('class')
node.nodeType === 2
node.nodeName === 'class'
node.tagName  === undefined

node = e.childNodes[0]
node.nodeType === 3
node.nodeName === '#text'
node.tagName  === undefined

So:

• only use nodeType to get the node type: nodeName breaks for nodeType === 1
• only use tagName for nodeType === 1

Statue

How does "nodeName break for nodeType === 1"? – Loach

@Loach better late than never. Have you read the linked documentation in which it is written that The read-only Node.nodeType property is an integer that identifies what the node is. ? – Caponize

@snr I just read it. According to MDN, nodeType 1 is ELEMENT_NODE. Accessing nodeName of an HTMLElement works fine for me. So I again ask: what is broken? – Loach

@Loach I don't remember anymore, but what I think I meant by "it breaks" is: unlike for other node types, you don't get a description of what kind of node you have (e.g. something like elem?) but rather the same of tagName which is different for each elem. So you would likely want to always use nodeType to detect node type and tagName for the tag name. – Statue