.tagName和.nodeName之间的区别

$('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

本文地址：http://javascript.askforanswer.com/tagnamehe-nodenamezhijiandequbie.html
文章标签：dom , javascript , nodename , tagname
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

文件下载