.tagName和.nodeName之间的区别

Question

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

Answer 1

该tagName属性专门用于元素节点(类型1节点)以获取元素的类型.

还有其他几种类型的节点(注释,属性,文本等).要获取任何各种节点类型的名称,可以使用该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

顺便说一下,Node接口是由DOM树中的每个节点实现的(包括document对象本身).Element接口仅由DOM树中表示HTML文档中元素的节点(具有nodeType=== 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获取节点类型：nodeNamebreak fornodeType === 1
• 仅tagName用于nodeType === 1