$('this')[0].nodeName
和 和有什么不一样$('this')[0].tagName
?
4 回答
该tagName
属性专门用于元素节点(类型 1 节点)以获取元素的类型。
还有其他几种类型的节点(评论、属性、文本等)。要获取任何各种节点类型的名称,您可以使用nodeName
属性。
nodeName
对元素 node使用时,您将获得它的标签名称,因此两者都可以真正使用,尽管使用时您会在浏览器之间获得更好的一致性nodeName
。
这很好地解释了两者之间的差异。
从文章中添加了文本:
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%。
阅读 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 的节点)实现。
这就是 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
break fornodeType === 1
- 只
tagName
用于nodeType === 1