$('this')[0].nodeName
和之间有什么区别$('this')[0].tagName
?
该tagName
属性专门用于元素节点(类型1节点)以获取element的类型。
还有其他几种类型的节点(注释,属性,文本等)。要获取任何各种节点类型的名称,可以使用nodeName
属性。
当使用nodeName
针对元素节点,你会得到它的标签名,这样无论是真的可以使用,但是你会得到浏览器之间更好的一致性使用时nodeName
。
这很好地解释了两者之间的区别。
在文章中添加了文字:
tagName
和nodeName
都是用于检查html元素名称的有用Javascript属性。在大多数情况下,两者都可以正常工作,但是如果仅支持A级浏览器,则首选nodeName;如果要支持IE5.5,则首选tagName。有两个问题
tagName
:
- 在所有版本的IE中,
!
在评论节点上调用时,tagName返回- 对于文本节点,tagName返回,
undefined
而nodeName返回#text
nodeName
有自己的问题集,但不那么严重:
!
在注释节点上调用时,IE 5.5返回。这比tagName的危害小,tagName在所有
版本的IE中都遭受这种行为- IE 5.5不支持nodeName作为
document
元素或属性。对于大多数实际目的,这两个都不是问题,但在任何情况下都应牢记- 使用此属性时,Konqueror会忽略注释节点。但是话又说回来,Konqueror和IE 5.5都不是A级浏览器
因此,
nodeName
由于它支持更广泛的场景并可能具有更好的前向兼容性,因此在大多数情况下坚持使用。更不用说它不会打扰注释节点,注释节点倾向于潜入未声明的代码中。不用担心IE 5.5或Konqueror,它们的市场份额接近0%。
在DOM Core规范中了解这些属性。
nodeName
是在“节点”界面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
中断nodeType === 1
- 仅
tagName
用于nodeType === 1
文章标签:dom , javascript , nodename , tagname
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!