Difference between .tagName and .nodeName

Question

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

Answer 1

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%.

Answer 2

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.

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) .

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