首先介绍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. linux常用命令6:关机重启命令

    关机重启命令 1.shutdown命令 shutdown [选项] 时间 选项: -c 取消前一个关机命令 -h 关机 -r 重启 2.其他关机命令 halt poweroff init  0 3.其 ...

  2. 《软件工程》individual project开发小记(一)

    今天周四没有想去上的课,早八点到中午11点半,下午吃完饭后稍微完善了一下,目前代码可以在dev c++和vs2012上正常运行,性能分析我看资料上一大坨,考虑到目前状态不太好,脑袋转不动了,决定先放一 ...

  3. 20135214万子惠 (2)——-Java面向对象程序设计

    实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初步掌握UML建模 4. 熟悉S.O.L.I.D原则 5. 了解设计模式 (一)单元测试 (1) 三种 ...

  4. ci总结

    1.创建模型,在模型中加载$this->load->database();2.在模型中写入想实现的功能方法3.在控制器中加载辅助函数和模型,$this->load->model ...

  5. Ubuntu下安装lamp

    在Ubuntu里安装PHP环境时可以用恨简单的方法,直接用tasksel命令安装. 首先要安装这个命令: sudo apt-get install tasksel 然后,sudo tasksel in ...

  6. session过期时ajax请求刷新浏览器

    ajax前置处理实现异步请求session过期时跳转登录页面 function checkLogin(json) { if (typeof(json) === 'string' && ...

  7. div+css总结—FF下div不设置高度背景颜色或外边框不能正常显示的解决方法(借鉴)

    原地址:http://blog.sina.com.cn/s/blog_60b35e830100qwr2.html 在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度, ...

  8. ion torrent ion proton

    https://www.youtube.com/watch?v=6Is3W7JkFp8 NGS 的视频 说的不错 一个做癌症的教授讲的 Ion Torrent™ next-generation seq ...

  9. yii点击上传图片后立即显示

    结合yii上传做的图片上传后立即显示,自己琢磨的,有点low <script type="text/javascript">//下面用于图片上传预览功能function ...

  10. Codeforces Round #374 (Div. 2) A B C D 水 模拟 dp+dfs 优先队列

    A. One-dimensional Japanese Crossword time limit per test 1 second memory limit per test 256 megabyt ...