首先介绍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。

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

  1. tagName和nodeName的区别

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

  2. tagName与nodeName的区别

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

  3. js中tagName和nodeName

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

  4. [转载]Request、Request.Form和Request.QueryString的区别

    Request.Request.Form和Request.QueryString的区别 request本身是一个系统的静态对象,本身也可以作为数组调用,比如request("abc" ...

  5. Form Data 和 Request Payload 区别

    Form Data 和 Request Payload 区别 如果请求头里设置Content-Type: application/x-www-form-urlencoded,那么这个请求被认为是表单请 ...

  6. request和request.form和request.querystring的区别

    asp中获取传递的参数,一般用request或者用request成员函数request.form,两种方式都可以获取页面表单传递过来的参数值,一直没留意两种方法有什么区别,我一般喜欢用request( ...

  7. Python form...import...和import的区别(自己理解的)

    Python有两种导入包和模块的方式,区别如下 form...import... import 相对导包 导入不同包子模块 可以导入模块所需变量/函数/类   init文件的__all__特殊变量(模 ...

  8. 费用性支出预分摊form方式和web方式区别

    预分摊 1 form方式 费用性支出先通过生产资产行请求 生成一个资产行,如果该资产行分摊到两个资产上则分割成两个资产行,既所谓的针对资产行进行分摊. 2 web方式 费用性支出直接分摊到资产上形成资 ...

  9. Request、Request.Form和Request.QueryString的区别

    Request.Form:获取以POST方式提交的数据(接收Form提交来的数据): Request.QueryString:获取地址栏参数(以GET方式提交的数据) Request:包含以上两种方式 ...

随机推荐

  1. PHP安装posix、pctl扩展

    安装问题 PHP Fatal error: Uncaught Error: Call to undefined function tsingsun\swoole\server\posix_kill() ...

  2. Web通信协议:OSI、TCP、UDP、Socket、HTTP、HTTPS、TLS、SSL、WebSocket、Stomp

    1      各层的位置 1.1      OSI七层模型全景图 OSI是Open System Interconnect的缩写,意为开放式系统互联. 1.2      五层网络协议 在七层的基础上, ...

  3. Linux--安全加固01

    Redhat是目前企业中用的最多的一类Linux,而目前针对Redhat攻击的黑客也越来越多了.我们要如何为这类服务器做好安全加固工作呢? 一. 账户安全 1.1 锁定系统中多余的自建帐号 检查方法: ...

  4. 从0开始搭建Element项目

    第一步:安装 Node.js/NPM 下载Node.js:https://nodejs.org/zh-cn/download/ 下载安装即可. 第二步:安装 vue-cli 打开 cmd 创建,在命令 ...

  5. 囧啊!!时间戳转化为时间出错php

    最近写了一个api,测试也没发现啥问题.可是上线之后发现有时api的返回结果不正确.为什么呢? 调我接口的同学给了两个调用示例,理论上两个的结果应该一致,实际结果却不一致. api调用带了一个时间戳参 ...

  6. c语言学习——安装

    作为颜控,选择了vs2019 工作组件选择c++,vs扩展开发. 默认安装就行了 安装成功,附图

  7. Hadoop学习之路(十六)Hadoop命令hadoop fs -ls详解

    http://blog.csdn.net/strongyoung88/article/details/68952248

  8. IntelliJ IDEA使用技巧整理

    1 .写代码时用 Alt-Insert ( Code|Generate… )可以创建类里面任何字段的 getter 与 setter 方法. 2 .右键点击断点标记(在文本的左边栏里)激活速查菜单,你 ...

  9. Linux Shell常用技巧(七)

    十六. 文件查找命令find: 下面给出find命令的主要应用示例:    /> ls -l     #列出当前目录下所包含的测试文件    -rw-r--r--. 1 root root 48 ...

  10. 学习JavaSE 数组

    一维数组 基本概念 1.数组中只允许放同一种类型(可以是父子关系). 2.数组即对象. 例: int[ ] arrs={0,1,2};//arrs即一个对象. 3.数组是定长的,不可以增加或者减少. ...