`

深入学习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的顺序依次存在于数组中。

------------------------------------

表单元素(form  input  textarea  select)与框架元素(iframe  frame)用  name  
这些元素都与表单(框架元素作用于form的target)提交有关,  在表单的接收页面只  
接收有name的元素,  赋ID的元素通过表单是接收不到值的.  
 
当然上述元素也可以赋ID值,  赋ID值的时候引用这些元素的方法就要变一下了.  
赋  name:  document.formName.inputName        document.frames("frameName")  
赋  ID    :  document.all.inputID                      document.all.frameID  
 
只能赋ID不能赋name的元素:(除去与表单相关的元素都只能赋ID)  
body  li  a  table  tr  td  th  p  div  span  pre  dl  dt  dd  font  b  等等

分享到:
评论

相关推荐

    高级架构师必备莲花宝典:细说系统架构

    高级架构师必备莲花宝典:细说系统架构

    20210818-平安证券-地产行业杂谈系列之十三:细说物业管理第三方拓展之道.pdf

    同时,报告指出了组织建设和激励措施的重要性,这包括了标准化的拓展流程、提升效率和激发员工热情的必要性。此外,报告也强调了关联房企协同发展的作用,例如项目联合获取和品牌影响力共享等。 接着,报告探讨了...

    浩瀚大洋是赌场:细说日本海军史(全3册) (俞天任) (z-lib.org).azw3

    浩瀚大洋是赌场:细说日本海军史(全3册) (俞天任) (z-lib.org).azw3

    互联网传媒行业:细说大厂2019新游储备,手游市场增速望持续回暖-20190522-中信建投-23页.pdf

    报告标题:“互联网传媒行业:细说大厂2019新游储备,手游市场增速望持续回暖” 报告描述:该报告关注2019年互联网传媒行业中的大型游戏公司(大厂)的新游戏储备情况,指出移动游戏市场有望在经历了2018年的低谷后...

    20210818-平安证券-地产行业杂谈系列之十三:细说物业管理第三方拓展之道.rar

    本报告“20210818-平安证券-地产行业杂谈系列之十三:细说物业管理第三方拓展之道”深入探讨了物业管理公司在第三方市场拓展中的策略和挑战。 在物业管理领域,第三方拓展是指物业公司不再仅仅依赖于开发母公司提供...

    新能源汽车产业链专题深度研究:细说造车新势力,遇见汽车新未来.pdf

    智能化将重新定义汽车的属性,而软件应用将成为竞争的新焦点。 当前,新能源汽车产业链面临的风险包括补贴政策的退坡和外资进入国内市场的竞争加剧。补贴政策的变动可能会对新能源汽车的销售造成影响,而外资企业的...

    地产杂谈系列之十三:细说物业管理第三方拓展之道.pdf

    在地产杂谈系列之十三中,我们深入探讨了物业管理第三方拓展的多个方面,包括影响拓展成效的因素、主流物企的拓展布局、第三方拓展的趋势思考以及投资建议和风险提示。 首先,第三方拓展的成效受到资金、渠道、品牌...

    《细说PHP》

    它的特点包括跨平台性、面向对象、易于学习和丰富的函数库等。 在学习PHP时,我们会遇到各种语法和结构。比如变量声明、基本的数据类型、运算符、流程控制(包括条件语句和循环语句)、数组、函数等。这些基础知识...

    互联网传媒行业:细说大厂新游储备,手游市场增速望持续回暖-0522-中信建投-23页.pdf

    报告标题和描述提到了互联网传媒行业的焦点,特别是关于2019年手游市场的复苏和大厂的新游储备。本文将详细解析这些知识点。 首先,2018年手游市场经历了低谷,主要受移动互联网红利减退、政策监管变化等因素影响。...

    细说HTML5高级API PDF 下载

    在市场开发需求增加和要求开发效率提高的情况下,我们不得不选择基于HTML5的开发技术,而Cordova是基于HTML5的,支持所有市面上的移动端设备,本书的主要特点就是为了读者能够深入浅出的学习使用HTML5和Cordova的...

    地产杂谈系列之十三:细说物业管理第三方拓展之道(2021)(16页).pdf

    这一策略在行业快速发展的背景下变得愈发重要,因为随着市场规模的扩大和销售增速的放缓,关联房企的贡献比例逐渐下降。 1. **规模诉求与第三方拓展**: - 随着物业管理行业的繁荣,企业对于扩大管理规模的需求...

    xsphp:细说PHP第一版原始码

    在阅读和学习xsphp项目中的源码时,我们可以深入探究以下几个关键知识点: 1. **语法结构**:PHP的语法与C语言类似,但更加简单,易于学习。早期的源码可以帮助我们理解PHP如何处理变量、函数、控制结构(如if-else...

    细说PyTorch深度学习:理论、算法、模型与编程实现 01

    《细说PyTorch深度学习:理论、算法、模型与编程实现》是一本全面解析PyTorch深度学习框架的专业书籍,旨在帮助读者深入理解和熟练应用PyTorch进行深度学习研究和开发。书中涵盖的内容广泛,从基本的深度学习理论到...

    《细说PHP》全部源代码

    通过对《细说PHP》的源代码进行学习,读者可以系统地掌握PHP编程,结合HTML和CSS构建动态、美观的网站,并通过MySQL进行数据管理。这些技能是现代Web开发者必备的基础,无论是在个人项目还是商业应用中,都将...

    细说PHP配套源码

    通过分析源码,你可以学习如何设计和实现类,理解类与对象的关系,以及如何使用接口和抽象类来提高代码的灵活性和可扩展性。 再者,源码中可能包含了错误处理和异常处理的示例。在PHP中,我们可以使用`try...catch`...

    细说PHP第二版 源码

    细说PHP第二版 源码 &lt;html&gt; &lt;!-- HTML文件开始 --&gt; &lt;head&gt; &lt;!-- HTML文件的头部开始 --&gt; ... ... &lt;!-- HTML文件的头部内容 --&gt; &lt;/head&gt; &lt;!-- HTML文件的头部结束 --&gt; &lt;body&gt; &lt;!-- ...

    《细说php》光盘源码

    《细说PHP》是一本深度解析PHP编程语言的书籍,其光盘源码包含了书中所有实例和示例的完整代码,对于学习和深入理解PHP有着极高的价值。...这份源码是实践和学习PHP的理想资源,适合初学者和进阶者参考。

    《细说PHP》配套源码

    《细说PHP》是一本深入浅出的PHP编程教材,旨在帮助读者全面理解PHP语言的原理和实际应用。配套源码提供了书中各个章节实例的完整代码,让学习者能够亲手实践,加深对PHP编程的理解。以下是对这些源码中涉及的知识点...

Global site tag (gtag.js) - Google Analytics