.tagName和.nodeName之间的区别

$('this')[0].nodeName和$('this')[0].tagName什么$('this')[0].tagName ？

Answer 1

tagName属性专门用于元素节点 （types1节点）来获取元素的types。

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

当使用nodeName对一个元素节点时 ，你会得到它的标签名，所以或者真的可以使用，但是当使用nodeName时候你会在浏览器之间获得更好的一致性 。

Answer 2

这是两者之间差异的一个很好的解释。

---

从文章中添加文字：

tagName和nodeName都是有用的Javascript属性，用于检查html元素的名称。 对于大多数用途，如果您仅支持A级浏览器，则会优先使用nodeName，如果您打算支持IE5.5，则首选tagName。

tagName有两个问题：

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

nodeName有它自己的问题，但它们不太严重：

• IE 5.5返回! 当在注释节点上调用时。 这比在所有版本的IE中遭受这种行为的tagName有害
• IE 5.5不支持document元素或属性的nodeName。 这些都不是最实际的问题，但是无论如何都应该记住
• 当使用此属性时，Konqueror会忽略注释节点。 但是Konqueror和IE 5.5并不是A级的浏览器

所以对于大多数实际的目的来说，坚持nodeName因为它支持更广泛的场景和更好的前向兼容性。 更不用说，它不会在注释节点上打嗝，而这个节点往往会隐藏起来。 不要担心IE 5.5或Konqueror的市场份额接近0％。

Answer 3

阅读DOM Core规范中的这些属性。

nodeName是在Node接口中定义的属性
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

btw Node接口是由DOM树中的每个节点（包括document对象本身）实现的。 元素接口仅由DOM树中代表HTML文档中元素的节点（节点types=== 1的节点）实现。

Answer 4

这就是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来获取节点types：节点typesnodeType === 1 nodeName中断
• 只使用nodeType === 1 tagName