.tagName和.nodeName之间的区别

$('this')[0].nodeName和之间有什么区别$('this')[0].tagName？

该tagName属性专门用于元素节点（类型1节点）以获取element的类型。

有几种其他类型的节点，以及（注释，属性，文本等）。要获取任何各种节点类型的名称，可以使用nodeName属性。

当使用nodeName针对元素节点，你会得到它的标签名，这样无论是真的可以使用，但是你会得到浏览器之间更好的一致性使用时nodeName。

这很好地解释了两者之间的区别。

在文章中添加了文字：

tagName和nodeName都是用于检查html元素名称的有用Javascript属性。在大多数情况下，两者都可以正常工作，但是如果仅支持A级浏览器，则首选nodeName；如果要支持IE5.5，则首选tagName。

有两个问题tagName：

• 在所有版本的IE中，!在评论节点上调用时，tagName返回
• 对于文本节点，tagName返回，undefined而nodeName返回#text

nodeName有自己的问题集，但不那么严重：

• !在注释节点上调用时，IE 5.5返回。这比tagName危害小，在所有 版本的IE中，tagName都会遭受此行为
• IE 5.5不支持nodeName作为document元素或属性。对于大多数实际目的，这两个都不是问题，但在任何情况下都应牢记
• 使用此属性时，Konqueror会忽略注释节点。但是话又说回来，Konqueror和IE 5.5并不是A级浏览器

因此，对于大多数实际用途，坚持使用它是nodeName因为它支持更广泛的方案，并且可能具有更好的前向兼容性。更不用说它不会打扰注释节点，注释节点倾向于潜入未声明的代码中。不用担心IE 5.5或Konqueror，因为它们的市场份额接近0％。

在DOM Core规范中了解这些属性。

nodeName是在“节点”界面http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095中定义的属性

tagName是在Element接口http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815中定义的属性

顺便说一下，Node接口由DOM树中的每个节点（包括document对象本身）实现。Element接口仅由DOM树中表示HTML文档中元素的那些节点（带有nodeType=== 1的节点）实现。

这就是在Firefox 33和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

所以：

• 只用nodeType得到节点类型：nodeName对于休息nodeType === 1
• 仅tagName用于nodeType === 1