TagName 和.nodeName 之间的区别

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

55193 次浏览
小开

这个 很好地解释了两者之间的区别。

增加了文章的内容:

tagName和 nodeName都是有用的 Javascript 属性 检查 html 元素的名称 做得很好，但是如果你只支持 A 级，nodeName 是首选 如果您打算将 IE5.5作为 好吧。

tagName有两个问题:

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

nodeName有自己的一套 问题，但它们不那么严重:

  • IE 5.5在注释节点上调用时返回 !。这比 tagName 危害小，因为 tagName 在 < em > all 中受到这种行为的影响 IE 的版本
  • IE 5.5不支持用于 document元素或属性的 nodeName。这两者都不应该是最实际的问题 但在任何情况下都应牢记
  • Konqueror 在使用这个属性时会忽略注释节点

因此，在大多数实际应用中，由于 nodeName的支持，所以坚持使用 nodeName 更广泛的情景，并可能更好地向前发展 兼容性。更不用说它不会在评论上打嗝 节点，它有潜入代码的倾向。不要担心 关于 IE 5.5或 Konqueror，因为他们的市场份额接近0% 。

小开

tagName财产是专门为 元素节点(类型1节点)获得类型 元素。

还有几个 其他类型的节点(注释、属性、文本等)。要获取任何节点类型的名称，可以使用 nodeName财产。

当对 元素节点元素节点使用 nodeName时，您将得到它的标记名，因此两者都可以真正使用，但是当使用 nodeName时，您将得到 浏览器之间更好的一致性。

小开

阅读 DOMCore 规范中的这些属性。

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的节点)实现。

小开

这就是火狐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
  • 对于 nodeType === 1只使用 tagName

提交答案