HTML元素的ID和Name特性的差别

今日對 <a href="#13"></a> 有點疑虑, 再加#表明1個錨,後面跟上13,就會跳到本頁面的13的部位,而這個13便是 Name屬性值。怎麼不
是ID值呢???因此查了下ID 和Name的區別,特記錄

最classical的回答:ID就好像1本人的身份证号码,而Name就好像他的姓名,ID明显是唯1的,而Name是能够反复的。
明显这个ID和Name的解答说的太含糊了,自然那个解释针对ID来讲是彻底对的,它便是Client端HTML元素的Identity。而Name实际上要繁杂的多,由于Name有许多种的主要用途,因此它其实不能彻底由ID来替代,从而将其撤销掉。实际主要用途有:
主要用途1: 做为可与服务器互动数据信息的HTML元素的服务器端标识,例如input、select、textarea、和button等。大家能够在服务器端依据其Name根据Request.Params获得元素递交的值。
主要用途2: HTML元素Input type='radio'排序,大家了解radio button控制在同1个排序类,check实际操作是mutex的,同1時间只能选定1个radio,这个排序便是依据同样的Name特性来完成的。
主要用途3: 创建网页页面中的锚点,大家了解<a href="URL">link</a>是得到1个网页页面非常连接,假如无需href特性,而改用Name,如:<a name="PageBottom"></a>,大家就得到了1个网页页面锚点。
主要用途4: 做为目标的Identity,如Applet、Object、Embed等元素。例如在Applet目标案例中,大家将应用其Name来引入该目标。
主要用途5: 在IMG元素和MAP元素之间关系的情况下,假如要界定IMG的网络热点地区,必须应用其特性usemap,使usemap="#name"(被关系的MAP
元素的Name)。
主要用途6: 一些特殊元素的特性,如attribute,meta和param。比如为Object界定主要参数<PARAM NAME = "appletParameter" VALUE = "value">或Meta中< META NAME = "Author" CONTENT = "Dave Raggett">。
明显这些主要用途都并不是能简易的应用ID来替代掉的,因此HTML元素的ID和Name的却别其实不是身份证号码和名字这样的差别,它们更本便是不一样作
用的物品。
大家能够根据1段编码来剖析1下在其中的彼此之间区别:

拷贝编码
编码以下:

<form method="post" action="" name="demoform">
<input type="text" name="oDemo" id=”oDemo2” value="DEMO" />
</form>

在IE访问器里,大家能够根据是多少方式来数据库索引到这个文字框目标?(为差别起见,大家把NAME和ID设变成不一样的值)
1. oDemo
2. demoform.oDemo
3. document.all.oDemo
4. document.all.demoform.oDemo
5. document.forms[0].oDemo
6. document.forms['demoform'].oDemo
7. document.forms['demoform'].childNodes[0]
8. document.forms['demoform'].elements[0]
9. document.getElementById('oDemo2')

以上9种数据库索引方式在IE6里边所有根据回到值检测,但是值得留意的是最终1种:在IE6里,我把数据库索引目标写成document.getElementById('oDemo'),访问器也能正确数据库索引到目标,简直恐怖的容错机制性啊!!
接着难题来了,大家把这段编码放在Mozilla Firefox 1.0里再实行1次,仅有第7种方式回到“undefined”,别的的方式能够正确数据库索引到目标,但是因为第3、4种方式用到了document.all这个IE特有目标,FF1.0尽管回到了正确的值,但是却在操纵台里传出了警示:警示:非规范的特性 document.all。请应用 W3C 的规范方式 document.getElementById()

接下来大家把HTML文字种类界定得严苛1点,在源码开始再加:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">使HTML文字依照HTML4.01规范去分析,在IE6里照样所有根据回到值检测,但是在Mozilla Firefox 1.0里不便就大了,第3、4种方式沒有任何的回到值,而在操纵台里传出了出错信息内容:不正确: document.all has no properties ,而第7种方式依然回到“undefined”。
小 结
NAME关键运用在互动式网页页面,表单递交给某个服务器端脚本制作后接受变解决量应用。从源码的标准性和适配性角度考虑,如在顾客端脚本制作里要数据库索引某个目标,提议用
document.getElementById()
此外举个简易的事例:
<form name="form1">
客户名:<input type=text name="username" id="username">
登陆密码:<input type=password name="password" id="pwd">
</form>
假如我要得到客户名和登陆密码;JS用name得到的话,就得写成document.form1.username.value;
document.form1.password.value;
用id得到:
docuement.getElementById("username");
docuement.getElementById("pwd");
有时name 将会会出現同样的姓名,因此这时候候大家用name得到就没法明确得到的是哪一个值了。
document.getElemntsByName("username");
这里获得的是1个数字能量数组