148

$('this')[0].nodeName和 和有什么不一样$('this')[0].tagName？

4

4 回答 4

137

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

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

nodeName对元素 node使用时，您将获得它的标签名称，因此两者都可以真正使用，尽管使用时您会在浏览器之间获得更好的一致性nodeName。

于 2011-02-02T19:34:30.943 回答
51

这很好地解释了两者之间的差异。

从文章中添加了文本：

tagName并且nodeName都是用于检查 html 元素名称的有用 Javascript 属性。在大多数情况下，两者都可以，但如果您仅支持 A 级浏览器，则首选 nodeName，如果您也打算支持 IE5.5，则首选 tagName。

有两个问题tagName：

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

nodeName有自己的一系列问题，但它们不那么严重：

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

nodeName因此，由于它支持更广泛的场景并可能具有更好的前向兼容性，因此对于大多数实际目的而言，请坚持使用。更不用说它不会在评论节点上打嗝，评论节点倾向于潜入未经宣布的代码。不要担心 IE 5.5 或 Konqueror，因为它们的市场份额接近 0%。

于 2011-02-02T18:49:11.713 回答
17

阅读 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 的节点）实现。

于 2011-02-02T19:47:56.027 回答
7

这就是 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
于 2014-11-17T07:34:37.870 回答