可以说几乎每个做过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等等

HTML中id与name的用法的更多相关文章

  1. Spring mvc中@RequestMapping 6个基本用法

    Spring mvc中@RequestMapping 6个基本用法 spring mvc中的@RequestMapping的用法.  1)最基本的,方法级别上应用,例如: Java代码 @Reques ...

  2. SQL Server中Rowcount与@@Rowcount的用法 和set nocount on 也会更新@@Rowcount

    rowcount的用法: rowcount的作用就是用来限定后面的sql在返回指定的行数之后便停止处理,比如下面的示例, set rowcount 10select * from 表A 这样的查询只会 ...

  3. Linq中关键字的作用及用法

    Linq中关键字的作用及用法 1.All:确定序列中的所有元素是否都满足条件.如果源序列中的每个元素都通过指定谓词中的测试,或者序列为空,则为 true:否则为 false. Demo: 此示例使用 ...

  4. SQL Server中Rowcount与@@Rowcount的用法

    rowcount的用法: rowcount的作用就是用来限定后面的sql在返回指定的行数之后便停止处理,比如下面的示例, set rowcount 10select * from 表A 这样的查询只会 ...

  5. HTML中id、name、class 区别

    参考:http://www.cnblogs.com/polk6/archive////.html http://blog.csdn.net/ithomer/article/details/ HTML ...

  6. jquery中append跟prepend的用法

    jquery中append和prepend的用法 append   是插入到元素中,并放到元素内的最后面prepend  是插入到元素中,并放到元素内的最前面例$("body"). ...

  7. SQL Server 中 with tmp 临时表的用法

    SQL Server 中 with tmp 临时表的用法 ----------with临时表用法,有时候采用临时表比采用in的效率更高,避免了全表扫描. 实例中实现了查询普通题.大题.子题目的sql ...

  8. html css中id和class的区别比较

    在定义样式的时候,有时候会将id和class的用法弄混淆,所以在这里特意说明一下: id和class属性是网页中两个通用的属性,它们协同工作使整个页面变得丰富多彩.当我们为一个元素定义样式时.可以使用 ...

  9. 转载——SQL Server中Rowcount与@@Rowcount的用法

    转载自:http://www.lmwlove.com/ac/ID943 rowcount的用法: rowcount的作用就是用来限定后面的sql在返回指定的行数之后便停止处理,比如下面的示例, set ...

随机推荐

  1. Python3.x:pdf2htmlEX(解析pdf)安装和使用

    Python3.x:pdf2htmlEX(解析pdf)安装和使用 简介 pdf2htmlEX是一款优秀的pdf转换成html的工具: 下载 windows下载地址:http://soft.rubypd ...

  2. 浅析 MySQL Replication(本文转自网络)

    作者:卢飞 来源:DoDBA(mysqlcode) 0.导读 本文几乎涵盖了MySQL Replication(主从复制)的大部分知识点,包括Replication原理.binlog format.复 ...

  3. React Native Could not expand ZIP

    Execution failed for task ':app:prepareSrolkReactNativeFilePickerUnspecifiedLibrary'. Could not expa ...

  4. Sharding-Jdbc实现分表分库

    Sharding-Jdbc分表分库LogicTable数据分片的逻辑表,对于水平拆分的数据库(表),同一类表的总称.订单信息表拆分为2张表,分别是t_order_0.t_order_1,他们的逻辑表名 ...

  5. vue2 遇到的问题汇集ing

    1 .子路由 { path: '/order-list', //订单列表 name: "order-list", component(resolve) { require.ensu ...

  6. python作业大纲分析

    2018-11-22 目前自学python这么久,零零散散的写了几次作业,下面是几个在完成过程中遇到困难较多的作业. 1.ATM+购物车系统 需求: 1.额度 15000或自定义  2.实现购物商城, ...

  7. Ubuntu 配置静态ip的方法

    1. 配置静态ip地址 $sudo vi /etc/network/interfaces 原有内容只有如下两行: auto lo iface lo inet loopback 向末尾追加以下内容: a ...

  8. 十一 web爬虫讲解2—Scrapy框架爬虫—Scrapy使用

    xpath表达式 //x 表示向下查找n层指定标签,如://div 表示查找所有div标签 /x 表示向下查找一层指定的标签 /@x 表示查找指定属性的值,可以连缀如:@id @src [@属性名称= ...

  9. mysql必会必知

    select distinct CHARACTER_SET_NAME from CHARACTER_SETS limit 12 offset 30;select distinct CHARACTER_ ...

  10. python基础之继承原理,多态与封装

    1.什么是继承? 继承是一种创建新的类的方式.class A: passclass B: pass2.如何继承---->如何寻找继承关系 现实生活中找继承关系是自下而上,在程序中写是自上而下继承 ...