Question

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

Answer 1

tagName property专门用于元素节点（类型1节点）以获取元素的类型。

还有几个other types of nodes（评论，属性，文字等）。要获取任何各种节点类型的名称，可以使用nodeName property。

对元素节点使用nodeName时，您将获得其标记名称，因此可以使用其中任何一个，但在使用{时，您将获得better consistency between browsers {1}}。

Answer 2

This对两者之间的区别有很好的解释。

从文章中添加了文字：

tagName和nodeName都是有用的Javascript属性   检查html元素的名称。对于大多数目的，要么会   做得很好，但如果你只支持A级，那么nodeName是首选   如果您打算支持IE5.5，则首选浏览器和tagName   好。

tagName有两个问题：


在IE的所有版本中，tagName在注释节点上调用时返回!

对于文本节点，tagName返回undefined，而nodeName返回#text


nodeName有自己的一套issues但不太严厉：


在注释节点上调用时，IE 5.5返回!。这比在所有中遭受此行为的tagName危害更小   IE的版本

IE 5.5不支持document元素的nodeName或属性。这些都不是最实际的问题   目的，但无论如何应该牢记

使用此属性时，Konqueror会忽略注释节点。但话说回来，Konqueror和IE 5.5不是A-grade browser


因此，出于大多数实际目的，由于其支持，坚持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对象本身）。 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获取节点类型：nodeName的{{1}}中断
仅对nodeType === 1

tagName

.tagName和.nodeName之间的区别

4 个答案: