`
lujar
  • 浏览: 511920 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

细说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:  建立页面中的锚点,我们知道link是获得一个页面超级链接,如果不用href属性,而改用Name,如:,我们就获得了一个页面锚点。

  用途4:  作为对象的Identity,如Applet、Object、Embed等元素。比如在Applet对象实例中,我们将使用其Name来引用该对象。

  用途5:  在IMG元素和MAP元素之间关联的时候,如果要定义IMG的热点区域,需要使用其属性usemap,使usemap="#name"(被关联的MAP元素的Name)。

  用途6:  某些特定元素的属性,如attribute,和param。例如为Object定义参数。

  显然这些用途都不是能简单的使用ID来代替掉的,所以HTML元素的ID和Name的却别并不是身份证号码和姓名这样的区别,它们更本就是不同作用的东西。

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

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

    消息框里显示的结果是:<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的顺序依次存在于数组中。 
 

评论

相关推荐

    细说HTML5高级API PDF 下载

    本书分为三部分,*部分是介绍HTML5的移动端布局和不同平台下Node.js和Cordova的环境搭建,第二部分介绍Cordova的常用核心API,包含了事件处理,地理位置,Web存储,多媒体等等。第三部分介绍了HTML5高级API中的几个...

    《细说PHP》

    《细说PHP》可能会涉及如何使用PHP来接收和处理用户通过HTML表单提交的数据。这通常包括获取表单数据、数据过滤、验证以及如何防止常见的安全问题如SQL注入和跨站脚本攻击(XSS)。 数据库的使用也是PHP开发中的一...

    《细说PHP》全部源代码

    这些例子有助于理解HTML标签和属性,以及如何组织网页内容。 CSS,即Cascading Style Sheets,用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。CSS源代码可能包含选择器、属性、盒模型、布局模式...

    细说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作为一种广泛应用于Web开发的服务器端脚本语言,它的精要版旨在浓缩其精华,...

    高洛峰php细说php4

    《细说PHP》开发Web应用程序PHP是最理想的工具,易于使用、功能强大、成本低廉、高安全性、开发速度快且执行灵活。 《细说PHP》以实用为目标设计,包含PHP开发最主流的各项技术,对每一个知识点都进行了深入详细的...

    细说PHP配套源码

    PHP5及以后版本支持类和对象的创建,包括类的定义、属性和方法、继承、封装和多态性。通过分析源码,你可以学习如何设计和实现类,理解类与对象的关系,以及如何使用接口和抽象类来提高代码的灵活性和可扩展性。 ...

    《细说PHP》配套源码

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

    《细说PHP》光盘源码

    《细说PHP》是一本广泛受到PHP初学者和进阶者欢迎的教程书籍,其光盘源码包含了大量的实例和练习,旨在帮助读者深入理解PHP编程语言的各种概念和技术。源码通常包括书中提及的示例程序、脚本以及可能的项目文件,...

    PHP课件 细说PHP345

    PHP课件 细说PHP

    细说php

    细说php

    兄弟连细说Linux PDF 文档

    兄弟连 细说Linux PDF文档。共12个按章节总结

    细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果

    大家可以发现,上网站上查询之后会得到overflow-x和overflow-y的一大堆属性值,但很多网站并没有详细说明各属性值的效果,我们今天细说一下。 各属性值如下: visible:默认值,不裁剪内容,可能会显示在内容框...

    细说linux pdf

    细说linux pdf 兄弟连(lampbrother)李明linux课程pdf

    《细说php》光盘源码

    《细说PHP》是一本深度解析PHP编程语言的书籍,其光盘源码包含了书中所有实例和示例的完整代码,对于学习和深入理解PHP有着极高的价值。这份源码的特点在于注释详尽,可以帮助读者更好地理解每段代码的功能和实现...

    细说PHP勘误表

    为了确保代码的正确性和高效运行,理解并处理这些错误至关重要。"细说PHP勘误表"是一个专门针对PHP编程中常见错误和修正方法的文档,它对于正在学习或从事PHP开发的人员来说是一个宝贵的资源。这份勘误表可能包含了...

    细说PHP第二版高洛峰.7z

    - 属性和方法访问:`__get()` 和 `__set()` 实现魔术方法,用于获取和设置不可直接访问的属性。 - 继承:一个类可以继承另一个类的属性和方法,用 `extends` 关键字表示。 - 抽象类和接口:`abstract class` 定义...

    《细说PHP》配套源码.rar

    //设置用户对文章的“支持”和“反对”的操作,使用AJAX实现 if($_GET["action"]=="1"){ echo '支持[&lt;span class="red"&gt;'.$comm-&gt;setSupport($_GET["cid"], 1).']'; }else if($_GET["action"]=="2"){ echo '...

Global site tag (gtag.js) - Google Analytics