Home » Javascript » Difference between .tagName and .nodeName

Difference between .tagName and .nodeName

Posted by: admin November 30, 2017 Leave a comment

Questions:

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

Answers:

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.

Questions:
Answers:

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

Questions:
Answers:

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

Questions:
Answers:

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