Difference between .tagName and .nodeName
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
.
This is a pretty good explanation of the difference between the two.
Added text from the article:
tagName
andnodeName
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%.
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) .
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 fornodeType === 1
- only use
tagName
fornodeType === 1