可以说几乎每个做过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. 【JavaScript】用JS绘制一个球

    参考: 1.http://www.w3school.com.cn/html5/html_5_canvas.asp 2.http://blog.csdn.net/qq_27626333/article/ ...

  2. Django学习笔记之模板渲染、模板语言、simple_tag、母版子版、静态配置文件

    一.首先我们用PyCharm来创建一个Django项目 终端命令:django-admin startproject sitename 图形创建:   这样一个Django项目就创建完成了,上面可以看 ...

  3. EasyUI:datagrid数据汇总

    EasyUI:datagrid数据汇总 js代码: var total=0;//全局变量 $(function(){ $('#tablebudgetdata').datagrid({ title:' ...

  4. Linux实用命令工具-dtrx根据需要自动解压

    刚刚逛网站的时候看到一个命令工具很不错——dtrx. 这个工具能够解压的类型包括tar, zip,rpm, deb, gem, 7z, cpio, rar 等等,并且这个工具能自动识别压缩包类型并进行 ...

  5. 混合开发的大趋势之 一个Android程序员眼中的 React.js 块级作用域 和 let

    转载请注明出处:王亟亟的大牛之路 最近都有事干然后,快到月底了这个月给CSDN的博文也就两篇,想想也蛮多天没更了,那就来一篇. 老规矩,先安利:https://github.com/ddwhan012 ...

  6. 枚举处理工具类 .net

    将枚举转化成List<T>的方法如下: /// <summary> /// 枚举处理工具类 /// </summary> public class EnumHelp ...

  7. JNIjw02

    1.VC6(CPP)的DLL代码: #include<stdio.h> #include "jniZ_JNIjw02.h" JNIEXPORT void JNICALL ...

  8. spring3: AOP 之 通知顺序

    如果我们有多个通知想要在同一连接点执行,那执行顺序如何确定呢?Spring AOP使用AspectJ的优先级规则来确定通知执行顺序.总共有两种情况:同一切面中通知执行顺序.不同切面中的通知执行顺序. ...

  9. PHP 环境搭建(win7+php5.6+apache或nginx)

    安装介质 PHP5.6.16(php-5.6.16-Win32-VC11-x64.zip) Apache2.4.18(httpd-2.4.18-win64-VC14.zip) nginx (nginx ...

  10. python 超时异常处理

    异常处理具体见:[循序渐进学Python]9.异常处理 环境平台:Python2.7.9 + Win8.1 本篇记录一下自己写爬虫的遇到的问题,程序中批量获取图片地址,然后批量保存.由于没有设置网址打 ...