.tagName 和 .nodeName 之间的区别

Posted 2023-05-08

【中文标题】.tagName 和 .nodeName 之间的区别

【英文标题】：Difference between .tagName and .nodeName

【发布时间】：2011-06-20 04:37:56

【问题描述】：

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

【问题讨论】：

这个问题更像是一个 dom 问题，因为它不是 jquery 特有的。

【参考方案1】：

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

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

当对一个元素节点使用nodeName时，你会得到它的标签名称，所以任何一个都可以使用，虽然你会在使用nodeName时得到better consistency between browsers。

【参考方案2】：

This 很好地解释了两者的区别。

---

添加了文章中的文字：

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

tagName 有两个问题：

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

nodeName 有自己的一组issues，但不那么严重：

IE 5.5 在评论节点上调用时返回!。这比在 all 中遭受这种行为的 tagName 的危害要小 IE 版本 IE 5.5 不支持 document 元素或属性的 nodeName。这些都不应该是最实际的问题 目的，但在任何情况下都应牢记 使用此属性时，Konqueror 会忽略注释节点。但是话又说回来，Konqueror 和 IE 5.5 不是A-grade browser

因此，由于它的支持，因此对于大多数实际用途而言，请坚持使用 nodeName 适用于更广泛的场景并可能更好地向前发展 兼容性。更不用说它不会打嗝评论 节点，它有潜入未经通知的代码的趋势。别担心 大约 IE 5.5 或 Konqueror，因为它们的市场份额接近 0%。

【参考方案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 的节点）实现。

【参考方案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 换成nodeType === 1 仅将tagName 用于nodeType === 1

【讨论】：

如何“nodeName 中断nodeType === 1”？

@WD40 迟到总比不到好。您是否阅读过其中写有The read-only Node.nodeType property is an integer that identifies what the node is. 的链接文档？

@snr 我刚读过。根据 MDN，nodeType 1 是 ELEMENT_NODE。访问 HTMLElement 的 nodeName 对我来说很好。所以我再次问：什么坏了？

@WD40 我不记得了，但我认为我所说的“它坏了”的意思是：与其他节点类型不同，你没有得到关于你拥有什么样的节点的描述（例如elem？）但与tagName 相同，每个元素都不同。因此，您可能希望始终使用nodeType 来检测节点类型并使用tagName 作为标签名称。