`
deng131
  • 浏览: 675410 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

tagName与nodeName区别

阅读更多
两者都是取得HTML元素的类型:

具体区别请看英文原文(本人翻译水平不好)。

tagName and nodeName are 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 undefined where as nodeName returns #text
nodeName has it’s own set of issues but 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 all versions of IE
    * IE 5.5 doesn’t support nodeName for the document element 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 nodeName due 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%.

参考:http://ghsky.com/2010/08/tagname-vs-nodename.html

区别是tagName对于早期IE5.0浏览器支持比较好nodeName在这点上支持不是很好,但是现在大多数用户是IE6以上了,所以这点可以放弃兼容性,而使用nodeName。
分享到:
评论
3 楼 deng131 2010-09-29  
document.getElementsByTagName('div')[0].attributes       //对象上的所有属性集合
document.getElementsByTagName('div')[0].getAttribute('') //取得对象上的指点属性
document.getElementById(aid).tagName; //返回html标签名
document.getElementsByTagName('div')[0].attributes[0].nodeName//对象节点名
2 楼 deng131 2010-09-29  
agName只对应html标签, nodeName对应着html节点对象的名称(key). 还是从语义上去理解。nodeName包含范围tagName,nodeName也可以表达html标签名(等同于tagName)。
1 楼 mbn 2010-09-29  
平时就这么用,还真没在意,刚也找了找API并写了个demo测试,分享下(如有不对请指出):
tagName只有一种场景:返回html标签名。如:document.getElementById(aid).tagName;
nodeName有三种场景:
  1,html标签名(等同于tagName)。
  2,对于TextNode,二者是有区别的。TextNode的tagName不存在,而其nodeName是"#text"
  3,一个HTMLelement的某一个属性对象的nodeName值等于其属性名。如<div id="je" x="XXX"></div>.那么document.getElementById("je").attributes["x"].nodeName==="x";

其实从名字上也好理解, tagName只对应html标签, nodeName对应着html节点对象的名称(key).

相关推荐

    浅谈JS之tagNaem和nodeName

    今天我们要深入探讨的是两个与元素节点相关的属性:`tagName`和`nodeName`。 `nodeName`是每一个DOM节点都拥有的属性,它代表了节点的名称。对于元素节点,`nodeName`通常返回的是元素的标签名,比如`&lt;div&gt;`、`&lt;p&gt;`...

    jquery tagname 取得方法

    2. **`.prop()`方法更适合获取DOM属性**:`prop()`方法可以访问真正的DOM属性,包括`tagName`、`nodeName`等,而这些是`.attr()`方法无法获取的。 #### 其他相关方法 - **`.is()`方法**:可以用来判断元素是否为...

    js获取多个tagname的节点数组

    如果节点的`nodeName`(大写的标签名)与正则表达式匹配,就将该节点添加到`nodes`数组中。最后,函数返回包含所有匹配节点的`nodes`数组,这些节点的顺序保持与他们在原始文档流中的顺序相同。 这个函数可以用于...

    jquery解析XML及获取XML节点名称的实现代码

    • get(0).tagName $(this).get(0).tagName • [0].tagName[0] $(this)[0].tagName • context.nodeName $(this).context.nodeName function getXMLData(){ $.ajax({ url:'data.xml', type: 'GET', dataType: '...

    jquery标签文档

    `get(0)`或`[0]`用于将jQuery对象转换为原生JavaScript DOM元素,因为DOM元素具有`nodeName`或`tagName`属性,可以返回元素的标签名。`toLowerCase()`是用来将返回的标签名转换为小写,因为HTML规范中标签名不区分大...

    Jquery和Js获得元素标签名称的方法总结

    var tagName = $element.prop("nodeName"); ``` `nodeName`属性在某些情况下可能更通用,因为它不仅适用于HTML元素,还适用于XML文档中的元素。 需要注意的是,所有这些方法都假设你已经选择了正确的元素。如果...

    详解jQuery中的prop()使用方法

    注意:prop() 方法应该用于检索属性值,例如 DOM 属性(如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected)。 提示:如需检索 HTML 属性,请使用 attr() 方法...

    js禁止Backspace键使浏览器后退的实现方法.docx

    var tagName = obj.nodeName.toUpperCase(); // 获取元素的标签名 // 如果元素不是input或textarea,则阻止Backspace键 if (tagName !== 'INPUT' && tagName !== 'TEXTAREA') { return stopIt(ev); } var ...

    浏览器兼容页面开发注意事项(javascript篇)_101028参考.pdf

    14. `nodeName`和`tagName`问题:`nodeName`返回元素的名称,大写在所有浏览器中,而`tagName`返回元素名,IE中大写,其他浏览器小写。使用`element.tagName.toUpperCase()`确保统一。 15. 元素属性:访问元素属性...

    jQuery获取当前对象标签名称的方法

    例如,`nodeName`属性与`tagName`非常相似,但`nodeName`返回的是包括HTML标记在内的标签名,对于XML文档来说,它的表现会有所不同。而在处理文本节点和注释节点时,我们可能需要用到`nodeType`属性,它能够告诉我们...

    浏览器兼容页面开发注意事项(javascript篇)_101028实用.pdf

    14. **nodeName和tagName问题**:`nodeName`返回的是大写的标签名,而`tagName`在所有浏览器中都是大写,对于一致性处理,推荐使用`tagName`。 15. **元素属性**:访问和设置元素属性时,IE支持`element.attribute...

    Kepware OPC Server与InTouch通信配置

    总体而言,Kepware OPC Server与InTouch之间的通信配置涉及安装选项的选择、别名映射、AccessName与Topic的配置以及Tag的创建。这些步骤都需要仔细处理,以确保通信顺畅且准确。在安装和配置过程中,还需要注意诸如...

    浏览器兼容页面开发注意事项(javascript篇)_101028.pdf

    14. **nodeName和tagName问题**:`nodeName`在所有浏览器中返回的是大写的标签名,而`tagName`在标准浏览器中返回大写,但在IE中返回小写。通常使用`tagName`更为保险。 15. **元素属性**:不同浏览器对HTML元素...

    Javascript入门学习第八篇 js dom节点属性说明第1/2页

    此时,相当于tagName属性。 比如: &lt;p&gt;aaaa : 则返回 p ; 如果是属性节点,nodeName将返回这个属性的名字。 如果是文本节点,nodeName将返回一个#text的字符串。 另外我要说的是: nodeName属性是一个只读属性...

    jQuery取得元素标签名称小结(附代码)

    3. **`.tagName`** 直接访问:虽然不是标准的jQuery方法,但有些情况下,直接访问jQuery对象的`tagName`属性也能得到预期结果。例如,`console.log($('#myImg')[0].tagName);`。 4. **`.nodeName`** :和`.get(0)....

    JavaScript知识点个人总结

    2. `nodeName`:返回元素的标签名,与`tagName`相同。 3. `nodeValue`:对于Element,其值为null。 4. `parentNode`:可能是Document或另一个Element。 5. 子节点可以是Element、Text、Comment、Processing_...

    第 5 章 BOM 和DOM.pptx

    * 属性:tagName、nodeName、nodeValue、nodeType、innerHTML、outerHTML 等。 * 方法:createElement()、createTextNode()、appendChild()、insertBefore()、removeChild()、replaceChild() 等。 DOM 事件: DOM ...

Global site tag (gtag.js) - Google Analytics