首先介绍DOM里常见的三种节点类型(总共有12种,如docment):元素节点,属性节点以及文本节点,例如<h2 class="title">head</h2>,其中h2是元素节点,class是属性节点,head是文本节点,在这里你可以说 h2这个元素节点包含一个属性节点和一个文本节点。其实几乎所有HTML的标签都是元素节点,而id, title, class等则是属性节点,而元素所包含的文本内容则是文本节点。

tagName和nodeName的语义是一样的,都是返回所包含标签的名称,例如上面的h2标签,都是返回h2,但是tagName只能在元素标签上使用,而nodeName则可以在所有的节点上使用。下面是nodeName在不同节点上的值:

Interface nodeName nodeValue attributes
Attr name of attribute value of attribute null
CDATASection #cdata-section content of the CDATA Section null
Comment #comment content of the comment null
Document #document null null
DocumentFragment #document-fragment null null
DocumentType document type name null null
Element tag name null NamedNodeMap
Entity entity name null null
EntityReference name of entity referenced null null
Notation notation name null null
ProcessingInstruction target entire content excluding the target null
Text #text content of the text node null

而tagName只有在元素节点上才会有值。

从DOM层次来看,nodeName是node 接口上的property,而tagName是element 接口上的property,所有的节点(元素节点,属性节点,文本节点等12种)都继承了node接口,而只有元素节点才继承了element节点,因此nodeName比tagName具有更大的使用范围。

总结:tagName只能用在元素节点上,而nodeName可以用在任何节点上,可以说nodeName涵盖了tagName,并且具有更多的功能,因此建议总是使用nodeName。

tagName和nodeName的区别的更多相关文章

  1. tagName与nodeName的区别

    首先介绍DOM里常见的三种节点类型(总共有12种,如docment):元素节点,属性节点以及文本节点,例如<h2 class="title">head</h2&g ...

  2. Form,tagName和nodeName的区别

    首先介绍DOM里常见的三种节点类型(总共有12种,如docment):元素节点,属性节点以及文本节点,例如<h2 class="title">head</h2&g ...

  3. js中tagName和nodeName

    DOM里常见的三种节点类型(总共有12种,如docment):元素节点,属性节点以及文本节点,例如<h2 class="title">head</h2>,其 ...

  4. JavaScript事件属性event.target和currentTarget 属性的区别。

    event.target 获取的是触发事件的标签元素 event.currentTarget 获取到的是发起事件的标签元素 一.事件属性:event.target target事件委托的定义:本来该自 ...

  5. 深入理解DOM节点类型第五篇——元素节点Element

    × 目录 [1]特征 [2]子节点 [3]特性操作[4]attributes 前面的话 元素节点Element非常常用,是DOM文档树的主要节点:元素节点是html标签元素的DOM化结果.元素节点主要 ...

  6. DOM-Element类型

    Element类型 Element类型用于表现XML或HTML元素,提供了对元素标签名.子节点及特性的访问.Element节点具有以下特征: nodeType的值为1 nodeName的值为元素的标签 ...

  7. JavaScript 闯关记

    DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API.DOM 描绘了一个层次化的节点树,允许开发人员添加.移除和修改页面的某一部分. 节点层次 DOM 可以将任何 HTML 或 XM ...

  8. 《JavaScript 闯关记》之 DOM(下)

    Element 类型 除了 Document 类型之外,Element 类型就要算是 Web 编程中最常用的类型了.Element 类型用于表现 XML 或 HTML 元素,提供了对元素标签名.子节点 ...

  9. jqu

    1 /*2 * 说明:3 * 本源代码的中文注释乃Auscarlin呕心沥血所作.旨在促进jQuery的传播以及向广大jQuery爱好者提供一个进阶4 *的途径,以让各位更加深入地了解jQuery,学 ...

随机推荐

  1. YII2.0上传文件

    针对于YII2.0官方手册来说,我稍微修改了一些内容具体的就是把model层里定义的uoload方法在controller方法里合并了 创建模型 namespace app\models; use y ...

  2. Palindrome_滚动数组&&DP

    Description A palindrome is a symmetrical string, that is, a string read identically from left to ri ...

  3. HDU 4869 (递推 组合数取模)

    Problem Turn the pokers (HDU 4869) 题目大意 有m张牌,全为正面朝上.进行n次操作,每次可以将任意ai张反面,询问n次操作可能的状态数. 解题分析 记正面朝上为1,朝 ...

  4. turn.js实现翻书效果

    JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...

  5. LINQ Operators之过滤(Filtering)

    转:http://www.cnblogs.com/lifepoem/archive/2011/11/16/2250676.html 在本系列博客前面的篇章中,已经对LINQ的作用.C# 3.0为LIN ...

  6. 内存回收,Dispose,Close,Finalie(C#中的析构函数)

    NET中的资源分托管和非托管,所谓的托管是指CLR(通用语言运行时)中进行管理的资源,它可以由CLR自动进行内存回收. 也就是大家熟知的GC(垃圾回收机制). 而对于 非托管资源,比如数据库连接,CO ...

  7. python 建立网站

    python建立网站相关学习资源: 1. 一整套教程:http://www.pythondoc.com/flask-mega-tutorial/helloworld.html 2. 知乎关于这个问题的 ...

  8. 十日谈 (share)

    @拔赤 一直想写这篇“十日谈”,聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是“初级”前端开发工程师 ...

  9. Apache Flex + Adobe Flash Builder环境配置

    在开始学习Flex之前,需要配置开发环境.Apache Flex SDK包含了你开发所需要的东西,当然除了集成开发环境(Integrated Development Environment,IDE). ...

  10. ion-nav-view的学习 和理解

    当用户在你的app中浏览时,Ionic能够保持检测他们的浏览历史.通过了解他们的浏览历史,向左或向右滑动时可以正确的在视图间转换,或不转换.一个额外的好处是Ionic的导航系统具有可以管理多个历史记录 ...