`
cindylu520
  • 浏览: 142216 次
  • 性别: Icon_minigender_2
  • 来自: 大连
社区版块
存档分类
最新评论

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

    博客分类:
  • HTML
阅读更多

第一种解释:

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

一直认为ID和NAME是一样的,两个又可以一起出现,甚是疑惑。

今天BAIDU了一下,才发现里面大有文章。发出来研究研究:

最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。
      显然这个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的却别并不是身份证号码和姓名这样的区别,它们更本就是不同作用的东西。

 

转帖:http://tieba.baidu.com/f?kz=194837029

 

 

第二种解释:

 

可以说几乎每个做过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的顺序依次存在于数组中。

 

转帖:http://www.cnblogs.com/birdshome/archive/2005/01/31/99562.html

分享到:
评论

相关推荐

    HTML5&CSS3网页制作:Input元素的type属性.pptx

    Input元素的type属性 Input元素 01 Input元素 普通文本框 密码文本框 按钮 Input元素 根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 ...

    javascript通过元素id和name直接取得元素的方法

    本文实例讲述了javascript通过元素id和name直接取得元素的方法。分享给大家供大家参考。具体分析如下: 我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化,貌似十分高深莫测,其实也不然。而且js...

    用js动态添加html元素,以及属性的简单实例

    用js动态添加html元素,以及属性的简单实例 function test(){ //创建节点 var lswt_2=document.createElement("div"); //设置节点id lswt_2.id='lswtColse'; //设置节点属性 lswt_2.style.width='11px'; lswt_2....

    JQuery中根据属性或属性值获得元素(6种情况获取方法)

    比如要获取页面p标签中属性有id的元素 代码如下: $(“p[id]”).css(“color”,”red”); 根据属性值获得元素 1.$。在jQuery 中$(“”),这个语法等同于$(document.createElement(“span”)) ,这是一种用法,在选择...

    HTML开发王

    7.4.1 定义命名锚点(id属性和name属性) 7.4.2 链接到命名锚点 7.5 文档关系链接(link元素) 7.5.1 定义关系链接地址(href属性) 7.5.2 向前链接或者反转链接(rel和rev属性) 7.5.3 链接到外部样式表 7.5.4 使用link元素...

    HTML5&CSS3网页制作:output元素.pptx

    &lt;output name="x" for="属性值"&gt; 说明 属性 值 描述 for element_id 定义输出域相关的一个或多个元素。 form form_id 定义输入字段所属的一个或多个表单。 name name 定义对象的唯一名称。(表单提交时使用) output...

    jacascript DOM节点——元素节点、属性节点、文本节点

     元素节点的三个node属性:nodeType:1、nodeName/TagName:元素的标签名大写、nodeValue:null;  其父节点 parentNode 指向包含该元素节点的元素节点 Element 或文档节点 Document;  元素的 childNodes 属性中...

    js DOM 元素ID就是全局变量

    如果一个元素拥有name属性,那么name属性的属性值就会成为window对象的属性名.但这个元素的标签名必须是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一个. 让我们看一个例子.假定...

    前端css+html+布局笔记

    内联框架的name属性值 在指定的内联框架中打开链接 注释 语法 &lt;!-- 注释内容 --&gt; 注释中的内容不会在页面中显示,但是会在源码中显示,我们可以通过注释来说明网页的代码 也可以通过注释隐藏一些...

    Javascript获取标签ID改变style属性的代码

    下面的这段代码中,我们通过select元素的name属性来设置具体要访问style的哪个属性(本例中为背景色),这样,这个函数就可以用来设置不同的CSS属性了

    通过Mootools 1.2来操纵HTML DOM元素

    元素的属性是组成一个HTML元素的各种不同部分,例如src、value、name等等。使用.get();方法非常简单: 参考代码: 代码如下:// 下面这行将返回id为“id_name”的元素的html标记名(div、a、span……) $(‘id_nam

    html表单制作及多种实例

    id属性为输入字段提供唯一的标识符,name属性定义了提交到服务器的字段名称。 • &lt;input type="submit"&gt;: 提交按钮。点击此按钮将提交表单。 注意:这只是一个基本的表单,实际上你可能需要包含更多的HTML元素,例如...

    html总结文档

    主要属性:id name action method 2.input元素: 主要属性:name type value class type: text submit button radio checkbox hidden reset file password 3.文本框/密码框:...

    从入门到精通HTML5——PDF——网盘链接

     12.2 新增的元素和废除的元素 228  12.2.1 新增的结构元素 228  12.2.2 新增的块级的语义元素 230  12.2.3 新增的行内的语义元素 231  12.2.4 新增的嵌入多媒体元素与交互性元素 231  12.2.5 新增的input元素...

    详解JS获取HTML DOM元素的8种方法

    什么是HTML DOM 文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展置标语言的标准编程... 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名(getElementsByClass

    html入门到放弃笔记

    1、创建一个 div 标记 ,增加属性 ,设置 align 属性的值为 center ,设置 id 属性的值为 container,设置 title 属性的值为 这是一个div &lt;div align="center" id="container" title="这是一个div"&gt; 四大标准...

    HTML与XHTML、以及HTML4与HTML5标签之间的区别简介

    6、XHTML用 id 属性代替 name 属性。 注意:应该在 "/" 符号前添加一个额外的空格,以使你的 XHTML 与当今的浏览器相兼容 7、语言属性(lang)lang 属性应用于几乎所有的 XHTML 元素。它定义元素内部的内容的所用...

Global site tag (gtag.js) - Google Analytics