浅谈html中id和name的区别实例代码
发布时间：2016-12-06 03:17:22 所属栏目：百科 来源：站长网
导读：我们可以通过一段代码来分析一下其中的微妙差别: lt;formnbsp;method="post"nbsp;action=""nbsp;name="demoform"gt; lt;inputnbsp;type="text"nbsp;name="oDemo"nbsp;id=”oDemo2”nbsp;value="DEMO"nbsp;/gt; lt;/formgt; 在IE浏览器里，我们可以通过多少
|
我们可以通过一段代码来分析一下其中的微妙差别: lt;formnbsp;method="post"nbsp;action=""nbsp;name="demoform"gt; lt;inputnbsp;type="text"nbsp;name="oDemo"nbsp;id=”oDemo2”nbsp;value="DEMO"nbsp;/gt; lt;/formgt; 在IE浏览器里，我们可以通过多少方法来索引到这个文本框对象？(为区别起见，我们把NAME和ID设成了不同的值) 1.nbsp;oDemo 2.nbsp;demoform.oDemo 3.nbsp;document.all.oDemo 4.nbsp;document.all.demoform.oDemo 5.nbsp;document.forms[0].oDemo 6.nbsp;document.forms['demoform'].oDemo 7.nbsp;document.forms['demoform'].childNodes[0] 8.nbsp;document.forms['demoform'].elements[0] 9.nbsp;document.getElementById('oDemo2') 以上9种索引方法在IE6里面全部通过返回值测试，不过值得注意的是最后一种：在IE6里，我把索引对象写成 document.getElementById('oDemo')，浏览器也能正确索引到对象，真是可怕的容错性啊！！ 接着问题来了，我们把这段代码放在Mozillanbsp;Firefoxnbsp;1.0里再执行一次，只有第7种方法返回“undefined”，其他的方法可以正确 索引到对象，不过由于第3、4种方法用到了document.all这个IE专有对象，FF1.0虽然返回了正确的值，不过却在控制台里发出了警 告：警告：非标准的属性nbsp;document.all。请使用nbsp;W3Cnbsp;的标准形式nbsp;document.getElementById()nbsp;。 接下来我们把HTML文本类型定义得严格一点，在源代码开头加上： lt;!DOCTYPEnbsp;HTMLnbsp;PUBLICnbsp;"-//W3C//DTDnbsp;HTMLnbsp;4.01nbsp;Transitional//EN"nbsp;"http://www.w3.org/TR/html4/loose.dtd"gt; 使HTML文本按照HTML4.01标准去解析，在IE6里照样全部通过返回值测试，不过在Mozillanbsp;Firefoxnbsp;1.0里麻烦就大了，第3、4种方法 没有任何的返回值，而在控制台里发出了报错信息：错误：nbsp;document.allnbsp;hasnbsp;nonbsp;propertiesnbsp;，而第7种方法依旧返回“undefined ”。 小nbsp;结 name原来是为了标识之用，但是现在根据规范，都建议用id来标识元素。 以下只能用name：nbsp;nbsp; nbsp;nbsp;nbsp;1.nbsp;nbsp;nbsp;nbsp;表单（form）的控件名，提交的数据都用控件的name而不是id来控制。因为有许多name会同时对应多个控件，比如 checkbox和radio，而id必须是全文档中唯一的。此外浏览器会根据name来设定发送到服务器的request。因此如果用id，服务器是无 法得到数据的。nbsp;nbsp; nbsp;nbsp;nbsp;2.nbsp;nbsp;nbsp;nbsp;frame和window的名字，用于在其他frame或window指定target。nbsp;nbsp; 以下只能用id：nbsp;nbsp; nbsp;nbsp;nbsp;1.nbsp;nbsp;nbsp;nbsp;label与form控件的关联，nbsp;nbsp; nbsp;nbsp;nbsp;lt;labelnbsp;for="MyInput"gt;Mynbsp;nbsp;nbsp;nbsp;Inputlt;/labelgt;nbsp;nbsp; nbsp;nbsp;nbsp;lt;inputnbsp;id="MyInput"nbsp;nbsp;nbsp;nbsp;type="text"gt;nbsp;nbsp; nbsp;nbsp;nbsp;for属性指定与label关联的元素的id，不可用name替代。nbsp;nbsp; nbsp;nbsp;nbsp;2.nbsp;nbsp;nbsp;nbsp;CSS的元素选择机制，以#MyId的方式指定应用样式的元素，不能用name替代。nbsp;nbsp; nbsp;nbsp;nbsp;3.nbsp;nbsp;nbsp;nbsp;脚本中获得对象：nbsp;nbsp; nbsp;nbsp;nbsp;IE支持在脚本中直接以id（而不是name）引用该id标识的对象。例如上面的input，要在脚本中获得输入的内容，可以直接以 MyInput.value来获得。nbsp;nbsp; nbsp;nbsp;nbsp;如果用DOM的话，则用document.getElementById("MyInput").value，如果要用name的话，通常先得到包含控件的form，例如 document.forms[0]，然后从form再引用name，注意这样得到的是经过计算后将发送给服务器的值。nbsp;nbsp; name与id的其他区别是： nbsp;nbsp;nbsp;id要符合标识的要求，比如大小写敏感，最好不要包含下划线（因为不兼容CSS）。而name基本上没有什么要求，甚至可以用数字 。 用CSS控制这个链接的停留样式， 可以这样写nbsp;#m_blognbsp;div.optnbsp;a:hover{color:#D57813}nbsp;或nbsp;#myLink:hover{color:#D57813} NAME主要应用在交互式网页，表单提交给某个服务器端脚本后接收变处理量使用。从源代码的规范性和兼容性角度出发，如在客户端 脚本里要索引某个对象，建议用document.getElementById()方法，尽量不要直接使用NAME的值，当然如果不考虑兼容性，以上9种方 法都可以在IE里运行通过(IE5.0没测试过)。 附：测试源代码 lt;!DOCTYPEnbsp;HTMLnbsp;PUBLICnbsp;"-//W3C//DTDnbsp;HTMLnbsp;4.01nbsp;Transitional//EN"nbsp;"http://www.w3.org/TR/html4/loose.dtd"gt; lt;htmlgt; lt;headgt;nbsp;nbsp;nbsp;nbsp;nbsp;lt;metanbsp;http-equiv="Content-Type"nbsp;content="text/html;nbsp;charset=gb2312"nbsp;/gt; nbsp;nbsp;nbsp;nbsp;lt;titlegt;lt;/titlegt; lt;/headgt; lt;bodygt; lt;formnbsp;method="post"nbsp;action=""nbsp;name="demoform"gt; nbsp;nbsp;nbsp;nbsp;lt;inputnbsp;type="text"nbsp;name="oDemo"nbsp;value="DEMO"nbsp;id="oDemo2"nbsp;/gt;lt;brnbsp;/gt; nbsp;nbsp;nbsp;nbsp;lt;inputnbsp;type="button"nbsp;value="oDemo"nbsp;onclick="alert(oDemo.value)"nbsp;/gt;lt;brnbsp;/gt; nbsp;nbsp;nbsp;nbsp;lt;inputnbsp;type="button"nbsp;value="demoform.oDemo"nbsp;onclick="alert(demoform.oDemo.value)"nbsp;/gt;lt;brnbsp;/gt; nbsp;nbsp;nbsp;nbsp;lt;inputnbsp;type="button"nbsp;value="document.all.oDemo"nbsp;onclick="alert(document.all.oDemo.value)"nbsp;/gt;lt;brnbsp;/gt; nbsp;nbsp;nbsp;nbsp;lt;inputnbsp;type="button"nbsp;value="document.all.demoform.oDemo"nbsp;onclick="alert(document.all.demoform.oDemo.value)"nbsp;/gt;lt;brnbsp;/gt; nbsp;nbsp;nbsp;nbsp;lt;inputnbsp;type="button"nbsp;value="document.forms[0].oDemo"nbsp;onclick="alert(document.forms[0].oDemo.value)"nbsp;/gt;lt;brnbsp;/gt; nbsp;nbsp;nbsp;nbsp;lt;inputnbsp;type="button"nbsp;value="document.forms['demoform'].oDemo"nbsp;onclick="alert(document.forms['demoform'].oDemo.value)"nbsp;/gt;lt;brnbsp;/gt; nbsp;nbsp;nbsp;nbsp;lt;inputnbsp;type="button"nbsp;value="document.forms['demoform'].childNodes[0]"nbsp;onclick="alert(document.forms ['demoform'].childNodes[0].value)"nbsp;/gt;lt;brnbsp;/gt; nbsp;nbsp;nbsp;nbsp;lt;inputnbsp;type="button"nbsp;value="document.forms['demoform'].elements[0]"nbsp;onclick="alert(document.forms ['demoform'].elements[0].value)"nbsp;/gt;lt;brnbsp;/gt; nbsp;nbsp;nbsp;nbsp;lt;inputnbsp;type="button"nbsp;value="document.getElementById('oDemo2')"nbsp;onclick="alert(document.getElementById('oDemo2').value)"nbsp;/gt;lt;brnbsp;/gt; lt;/formgt; lt;/bodygt; lt;/htmlgt; （编辑：温州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
