鸟食轩

 Microsoft .NET[C#] MVP 2003
随笔 - 424, 文章 - 231, 评论 - 5394, 引用 - 344
数据加载中……

细说HTML元素的ID和Name属性的区别

    可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。

    上周我也遇到了ID和Name的问题,在页面里输入了一个input type="hidden",只写了一个ID='SliceInfo',赋值后submit,在后台用Request.Params["SliceInfo"]却怎么也去不到值。后来恍然大悟因该用Name来标示,于是在input里加了个Name='SliceInfo',就一切ok了。

    第一段里对于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控件在同一个分组类,check操作是mutex的,同一时间只能选中一个radio,这个分组就是根据相同的Name属性来实现的。
    用途3: 建立页面中的锚点,我们知道<a href="URL">link</a>是获得一个页面超级链接,如果不用href属性,而改用Name,如:<a name="PageBottom"></a>,我们就获得了一个页面锚点。
    用途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的却别并不是身份证号码和姓名这样的区别,它们更本就是不同作用的东西。

    当然HTML元素的Name属性在页面中也可以起那么一点ID的作用,因为在DHTML对象树中,我们可以使用document.getElementsByName来获取一个包含页面中所有指定Name元素的对象数组。Name属性还有一个问题,当我们动态创建可包含Name属性的元素时,不能简单的使用赋值element.name = "..."来添加其Name,而必须在创建Element时,使用document.createElement('<element name = "myName"></element>')为元素添加Name属性。这是什么意思啊?看下面的例子就明白了。

<script language="JavaScript">
var input = document.createElement('INPUT');
input.id 
= 'myId';
input.name 
= 'myName';
alert(input.outerHTML);
</script>

    消息框里显示的结果是:<INPUT id=myId>。

<script language="JavaScript">
var input = document.createElement('<INPUT name="myName">');
input.id 
= 'myId';
alert(input.outerHTML);
</script>

    消息框里显示的结果是:<INPUT id=myId name=myName>。
    初始化Name属性的这个设计不是IE的缺陷,因为MSDN里说了要这么做的,可是这样设计的原理什么呢?我暂时没有想太明白

    这里再顺便说一下,要是页面中有n(n>1)个HTML元素的ID都相同了怎么办?在DHTML对象中怎么引用他们呢?如果我们使用ASPX页面,这样的情况是不容易发生的,因为aspnet进程在处理aspx页面时根本就不允许有ID非唯一,这是页面会被抛出异常而不能被正常的render。要是不是动态页面,我们硬要让ID重复那IE怎么搞呢?这个时候我们还是可以继续使用document.getElementById获取对象,只不过我们只能获取ID重复的那些对象中在HTML Render时第一个出现的对象。而这时重复的ID会在引用时自动变成一个数组,ID重复的元素按Render的顺序依次存在于数组中。

posted on 2005-01-31 00:23 birdshome 阅读(8176) 评论(24)  编辑 收藏 所属分类: Jscript&Dhtml开发

评论

#1楼    回复  引用  查看    

你的钻研精神值得学习
2005-01-31 09:04 | 灵感之源      

#2楼    回复  引用  查看    

其实一句话:ID和html页面内部元素相关,不和页面元素的内容相关。name则更多地和页面元素的内容相关。
2005-01-31 10:18 | 老翅寒暑      

#3楼 [楼主]   回复  引用  查看    

不是吧,有校验码的提交都能被Spam机器人识别啊?!
2005-01-31 10:56 | birdshome      

#4楼    回复  引用  查看    

看了看Reference,name还有一个用途window.name,楼主是不是可以把这个也算上一个呢?最常见的就是windows.open的第二个参数,在<A>的target里用到。

把那个什么耶稣的删了吧,看着倒胃口。
2005-01-31 12:33 |       

#5楼    回复  引用  查看    

呃,另外<META>也有name,而且似乎与众不同,楼主一并解释一下。
2005-01-31 12:35 |       

#6楼 [楼主]   回复  引用  查看    

@阮
谢谢你的建议,meta我已经加到"用途6"那个分类中了,可是window.name和window.open([sURL] [, sName] [, sFeatures] [, bReplace])好像不是文中讨论的范畴了:}
2005-01-31 13:44 | birdshome      

#7楼    回复  引用    

id和name的区别一直就没搞太懂,今天算是明白一些了:)
2005-02-03 03:10 | robaggio [未注册用户]

#8楼    回复  引用  查看    

阿狗,怎么不把你的blog地址给出来呢?
2005-02-03 13:27 | birdshome      

#9楼    回复  引用    

还有 frame 和 iframe 的 name 属性。

iframe 的 name 有点特殊,上次遇到一个问题,一定要用 name 才行,呵呵,忘记具体的了

有空站长测一下吧 :)
2005-02-16 17:01 | boynannan [未注册用户]

#10楼    回复  引用    

补上一句:
大概是用 iframe 页面里的 onload()/onclick() 改变 iframe 的大小 ~~
2005-02-16 17:03 | boynannan [未注册用户]

#11楼 [楼主]   回复  引用  查看    

name是frame, iframe & frameset的Identity,还有什么特殊的地方吗?你说的那个onload()/onclick(),是说在里面引用frame要使用frame的name吧?
2005-02-16 17:15 | birdshome      

#12楼    回复  引用  查看    

对于 iframe 直接使用 id 获取的是其 window 对象(而通过 name 却可以获取其 element 对象),我想 boynannan 说的问题应该是这个吧!不知道猜测是否准确。^_^
2005-02-19 06:52 | 辣妹子      

#13楼    回复  引用    

谢谢
2005-07-01 07:59 | 桑马 [未注册用户]

#14楼    回复  引用    

按楼主的说法推断,是不是可以用name全部代替id呢?
2005-07-13 12:34 | 芨芨草 [未注册用户]

#15楼 [楼主]   回复  引用  查看    

@芨芨草
我这个文章是为了说明id和name的详细用途和关系,但id就是id,name也就是name,他们各有各的用处,我没有说要用谁替换谁的问题。而且实际上很多地方也是替换不了的。
2005-07-13 14:30 | birdshome      

#16楼    回复  引用    

谁说id不可以重复,即使是id重复你同样可以定位元素,真正唯一的是个叫uniqueID的属性
name通常只用于表单元素.没有name属性的表单元素是不会被提交的
2005-08-31 16:33 | 姓名 [未注册用户]

#17楼    回复  引用  查看    

不錯,剛才用到了這裡面的一個細節
2005-11-11 20:01 | 湘子      

#18楼    回复  引用    

好博客,崇拜你
2005-11-28 12:03 | 智宏 [未注册用户]

#19楼    回复  引用    

楼主的方法我以前也用过,但是document.createElement('<INPUT name="myName">');是不符合W3C规范的,在某些浏览器上被人为是错误。用setAttribute处理DOM创建的对象name属性后,用outerHTML看确实是没有name属性,但是在用form提交后name属性却有效。但是对于iframe的name属性就不行了,在提交一个target属性指向了iframe的name值的form对象后,并没有在iframe中显示,而是弹出了一个新页面。这点还希望大家想想如何去解决。是DOM代码即符合W3C规范,又适应各种浏览器。
2006-05-15 14:43 | Seaoh [未注册用户]

#20楼    回复  引用    

没那么复杂
一个前台用一个后台用
2006-12-14 16:25 | mike[匿名] [未注册用户]

#21楼    回复  引用    

谢谢楼主,受益非浅!
2006-12-25 20:33 | 脚印 [未注册用户]

#22楼    回复  引用    

我认为这么设计原因是,当在创建一个对象时,系统将给这个对象一个默认的唯一性的对象名称,这就是uniqueID的属性的值了, Name属性指定了对这个对象的引用名称,这个对象的名字是存在于在文档目录树(DOM)的对象列表中,如果没有给这个对象初始化一个名字这个对象虽然存在,却无法在程序调用,当页面提交时,浏览器将把页面中的对象与相应的值一并提交,而无Name属性的内容不在对象列表中则不会提交。而ID则只是一个字符类型的名字,常用于在CSS中作为在文档目录树(DOM)中作为对象的唯一标识符的ID作为选择符,在程序中可以使用getElementById将其于对象的默认名称联系起来,作为对其的引用,这样使用这个ID属性也将可以作为一个对象来调用。
不知道我这么理解对不对,欢迎大家批评指正~~~
2007-01-26 15:17 | notbadman [未注册用户]

#23楼    回复  引用    

这篇文章超级精辟,我就是用了个ID ,然后没有值,是无意间换成NAME就可以了
2007-06-01 10:33 | lan [未注册用户]

#24楼    回复  引用  查看    

HTML元素的ID和NAME属性的区别说的真是详细,楼主真有心,学习了
2008-07-16 11:10 | 火无极