可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?

而同样我们也可以得到最经典的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。

上面一段对于ID和Name的解答说的太笼统了,以下我们来具体探讨一下。

一、name和id 都可以用来调用html中的元素

当我们需要在脚本里访问页面内一个html元素的时候,一般都是通过指定HTML元素的id或name

WEB标准下可以通过getElementById() 、getElementsByName() 、 getElementsByTagName()访问HTML文档中的任一个元素。

要访问某一特定元素尽量用标准的document.getElementById(id)。

如果一个文档中有两个以上的标签NAME相同,那么document.getElementsByName(name)就可以取得这些元素组成一个数组。

访问标签则用标准的document.getElementByTagName(tag)。

注意:id 标识的是大小写敏感的,而name基本上没有什么要求,甚至可以用数字。

二、什么情况下必须用name?

1、表单元素(例如:form、input、textarea、select 、button 等)通常与表单提交有关,在表单的接收页面只接收有name的元素,赋id的元素通过表单是接收不到值的。在form里面,如果不指定Name的话,就不会发送到服务器端。

2、表单元素复选框checkbox、单选按钮
radio 通常会对应多个控件,这时必须用name属性来实现分组。同一组使用同一个name。使两个题目的选项之间不产生干扰。

3、框架元素(iframe、frame)的名字,用于在其他iframe、frame指定target

4、建立页面中的锚点,我们知道<a href="URL">link</a>是获得一个页面超级链接,如果不用href属性,而改用name,如:<a name="pageTop"></a>,我们就获得了一个页面锚点。

5、在IMG元素和MAP元素之间关联的时候,如果要定义IMG的热点区域,需要使用其属性usemap,使usemap="#name"(被关联的MAP元素的name)。

6、某些特定元素的属性,如attribute,meta和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中<META NAME = "Author" CONTENT = "Admin10000.com">

三、什么情况下必须用id ?

1、label与form控件的关联。

<label for="MyInput">My
Input</label>

            <input id="MyInput"
type="text">

            for属性指定与label关联的元素的id,不可用name替代

2、id 可以用来设置一个css样式。

3、脚本中获得对象:IE支持在脚本中直接以id(而不是name)引用该id标识的对象。

例如上面的input,要在脚本中获得输入的内容,可以直接以 MyInput.value来获得。如果用DOM的话,则用document.getElementById("MyInput").value;

如果要用name的话,通常先得到包含控件的form,例如document.forms[0],然后从form再引用name,注意这样得到的是经过计算后将发送给服务器的值

name与id 区别 

id要符合标识的要求,比如大小写敏感,最好不要包含下划线(因为不兼容CSS)。而name基本上没有什么要求,甚至可以用数字。

table、tr、td、div、p、span、h1、li等元素一般用id。与表单相关的元素也可以赋ID值,  但为这些元素赋ID值的时候引用这些元素的方法就要变一下了,具体的如下:

赋name时,引用元素的方式:  document.formName.inputName 或 document.frames("frameName") 

赋id时,引用元素的方式:  document.all.inputID 或 document.all.frameID 

除去与表单相关的元素,只能赋id不能赋name,这些元素有body、li、a、table、tr、td、th、p、div、span、pre、dl、dt、dd、font、b等等

最新文章

  1. JAVA WEB项目中各种路径的获取
  2. Root--超级用户
  3. SHLVL 和 BASH_SUBSHELL 两个变量的区别
  4. java动态绑定的一点注意
  5. 修复ext4日志(jbd2)bug( Ext4 文件系统有以下 Bug)
  6. 系统安全扫描工具(appscan)的扫描类型小记
  7. 位查询【 openjudge数据结构课程练习题】
  8. Objective-C 【protocol-协议 的了解使用】
  9. Use excel Macro export data from database
  10. poj2105---用指针对数组分块操作
  11. BZOJ 1834: [ZJOI2010]network 网络扩容(最大流+最小费用最大流)
  12. rs.Open sql,conn,0,2,1
  13. 小白的Python之路 day5 python模块详解及import本质
  14. 03_Android项目中读写文本文件的代码
  15. Postman----支持markdown可自动生成接口文档
  16. 将普通用户添加到sudo
  17. thymeleaf的fragment例子
  18. java 两个日期之间的天数
  19. C#开发VS LUA开发
  20. ASP.NET Razor引入命名空间(视图中数据序列化)

热门文章

  1. React之JSX语法
  2. [Usaco2008 Open]Word Power 名字的能量
  3. 使用C语言扩展Python提供性能
  4. 逆序对算法(reverse pair)
  5. xml简介与使用
  6. bootstrap-datepicker 时间范围选择函数封装
  7. xpath选择器简介及如何使用
  8. Netty原理
  9. f5 ddos cc——Mitigating DDoS Attacks with F5 Technology
  10. vue项目中报常见错误