Javascript .tagName 和 .nodeName 的区别

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4878484/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 14:34:04  来源:igfitidea点击:

Difference between .tagName and .nodeName

javascriptdom

提问by Kdniazi

What is the difference between $('this')[0].nodeNameand $('this')[0].tagName?

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

回答by user113716

The tagNamepropertyis meant specifically for element nodes(type 1 nodes) to get the type of element.

tagName属性专门用于元素节点(类型 1 节点)以获取元素的类型。

There are several other types of nodesas well (comment, attribute, text, etc.). To get the name of any of the various node types, you can use the nodeNameproperty.

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

When using nodeNameagainst an element node, you'll get its tag name, so either could really be used, though you'll get better consistency between browserswhen using nodeName.

当使用nodeName针对元素节点,你会得到它的标签名,这样无论是真的可以使用,但是你会得到浏览器之间更好的一致性使用时nodeName

回答by khr055

Thisis a pretty good explanation of the difference between the two.

很好地解释了两者之间的差异。



Added text from the article:

从文章中添加文本:

tagNameand nodeNameare both useful Javascript properties for checking the name of an html element. For most purposes, either will do fine but nodeName is preferred if you are supporting only A-grade browsers and tagName is preferred if you intend to support IE5.5 as well.

There are two issues with tagName:

  • In all versions of IE, tagName returns !when called on a comment node
  • For text nodes, tagName returns undefinedwhereas nodeName returns #text

nodeNamehas its own set of issuesbut they are less severe:

  • IE 5.5 returns !when called on a comment node. This is less harmful than tagName which suffers from this behaviour across allversions of IE
  • IE 5.5 doesn't support nodeName for the documentelement or for attributes. Neither of these should be a concern for most practical purposes but should be kept in mind in any case
  • Konqueror ignores comment nodes when using this property. But then again, Konqueror, along with IE 5.5 is not an A-grade browser

So for most practical purposes stick to nodeNamedue to its support for a wider range of scenarios and potentially better forward compatibility. Not to mention that it doesn't hiccup on a comment node, which has a tendency to creep into code unannounced. Don't worry about IE 5.5 or Konqueror as their market share is near 0%.

tagNamenodeName都是用于检查 html 元素名称的有用 Javascript 属性。对于大多数用途,两者都可以,但如果您只支持 A 级浏览器,则首选 nodeName,如果您也打算支持 IE5.5,则首选 tagName。

有两个问题tagName

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

nodeName有其自身的一系列问题,但它们不那么严重:

  • IE 5.5!在评论节点上调用时返回。这比在所有版本的 IE 中遭受这种行为的 tagName 危害小
  • IE 5.5 不支持document元素或属性的nodeName 。对于大多数实际目的而言,这些都不是问题,但无论如何都应牢记
  • 使用此属性时,Konqueror 会忽略注释节点。但话说回来,Konqueror 和 IE 5.5 都不是A 级浏览器

因此,出于大多数实际目的,坚持使用,nodeName因为它支持更广泛的场景,并且可能具有更好的向前兼容性。更不用说它不会在注释节点上打嗝,这有可能在未经通知的情况下潜入代码中。不要担心 IE 5.5 或 Konqueror,因为它们的市场份额接近 0%。

回答by ?ime Vidas

Read about those properties in the DOM Core spec.

在 DOM Core 规范中阅读这些属性。

nodeNameis a property defined in the Node interface
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095

nodeName是 Node 接口中定义的属性
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095

tagNameis a property defined in the Element interface
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815

tagName是 Element 接口中定义的属性
http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-104682815

btw the Node interface is implemented by every node in the DOM tree (including the documentobject itself). The Element interface is implemented only by those nodes in the DOM tree that represent elements in an HTML document (nodes with nodeType=== 1) .

顺便说一句,节点接口由 DOM 树中的每个节点(包括document对象本身)实现。Element 接口仅由 DOM 树中表示 HTML 文档中的元素的节点(带有nodeType=== 1 的节点)实现。