浅谈html中id和name的区别实例代码

所属分类：网络编程 / CSS/HTML 阅读数： 1898

收藏 0赞 0分享

我们可以通过一段代码来分析一下其中的微妙差别:

<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里面全部通过返回值测试，不过值得注意的是最后一种：在IE6里，我把索引对象写成

document.getElementById('oDemo')，浏览器也能正确索引到对象，真是可怕的容错性啊！！

接着问题来了，我们把这段代码放在Mozilla Firefox 1.0里再执行一次，只有第7种方法返回“undefined”，其他的方法可以正确

索引到对象，不过由于第3、4种方法用到了document.all这个IE专有对象，FF1.0虽然返回了正确的值，不过却在控制台里发出了警

告：警告：非标准的属性 document.all。请使用 W3C 的标准形式 document.getElementById() 。

接下来我们把HTML文本类型定义得严格一点，在源代码开头加上：

<!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原来是为了标识之用，但是现在根据规范，都建议用id来标识元素。

以下只能用name：
   1.    表单（form）的控件名，提交的数据都用控件的name而不是id来控制。因为有许多name会同时对应多个控件，比如

checkbox和radio，而id必须是全文档中唯一的。此外浏览器会根据name来设定发送到服务器的request。因此如果用id，服务器是无

法得到数据的。
   2.    frame和window的名字，用于在其他frame或window指定target。

以下只能用id：
   1.    label与form控件的关联，
   <label for="MyInput">My    Input</label>
   <input id="MyInput"    type="text">
   for属性指定与label关联的元素的id，不可用name替代。
   2.    CSS的元素选择机制，以#MyId的方式指定应用样式的元素，不能用name替代。
   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基本上没有什么要求，甚至可以用数字

。

用CSS控制这个链接的停留样式，
可以这样写 #m_blog div.opt a:hover{color:#D57813} 或 #myLink:hover{color:#D57813}

NAME主要应用在交互式网页，表单提交给某个服务器端脚本后接收变处理量使用。从源代码的规范性和兼容性角度出发，如在客户端

脚本里要索引某个对象，建议用document.getElementById()方法，尽量不要直接使用NAME的值，当然如果不考虑兼容性，以上9种方

法都可以在IE里运行通过(IE5.0没测试过)。

附：测试源代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
</head>
<body>
<form method="post" action="" name="demoform">
    <input type="text" name="oDemo" value="DEMO" id="oDemo2" /><br />
    <input type="button" value="oDemo" onclick="alert(oDemo.value)" /><br />
    <input type="button" value="demoform.oDemo" onclick="alert(demoform.oDemo.value)" /><br />
    <input type="button" value="document.all.oDemo" onclick="alert(document.all.oDemo.value)" /><br />
    <input type="button" value="document.all.demoform.oDemo" onclick="alert(document.all.demoform.oDemo.value)" /><br />
    <input type="button" value="document.forms[0].oDemo" onclick="alert(document.forms[0].oDemo.value)" /><br />
    <input type="button" value="document.forms['demoform'].oDemo" onclick="alert(document.forms['demoform'].oDemo.value)" /><br />
    <input type="button" value="document.forms['demoform'].childNodes[0]" onclick="alert(document.forms
['demoform'].childNodes[0].value)" /><br />
    <input type="button" value="document.forms['demoform'].elements[0]" onclick="alert(document.forms
['demoform'].elements[0].value)" /><br />
    <input type="button" value="document.getElementById('oDemo2')" onclick="alert(document.getElementById('oDemo2').value)" /><br />
</form>
</body>
</html>

更多精彩内容其他人还在看

浅谈html中id和name的区别实例代码

简单明了带你了解CSS Modules

新手学习css优先级

css进阶学习选择符

实现css文字垂直居中的8种方法

完美实现CSS垂直居中的11种方法

webpack高级配置与优化详解

5个HTML5的常用本地存储方式详解与介绍

CSS代码检查工具stylelint的使用方法详解

Zen Coding css,html缩写替换大观快速写出html,css

javascript代码规范小结

网络赚钱

站长故事

浅谈html中id和name的区别实例代码

简单明了带你了解CSS Modules

新手学习css优先级

css进阶学习 选择符

实现css文字垂直居中的8种方法

完美实现CSS垂直居中的11种方法

webpack高级配置与优化详解

5个HTML5的常用本地存储方式详解与介绍

CSS代码检查工具stylelint的使用方法详解

Zen Coding css,html缩写替换大观 快速写出html,css

javascript代码规范小结

网络赚钱

站长故事

css进阶学习选择符

Zen Coding css,html缩写替换大观快速写出html,css