`
龙塘湾
  • 浏览: 136087 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
文章分类
社区版块
存档分类
最新评论

HTML中的ID和Name区别详解

阅读更多

type浏览器中用于出入的控件(比方说type="text",这就是一个文本框;type="button",这就是一个按钮)
type可选的值如下:
button 按钮
checkbox 复选按钮组件
file 文件上传组件
hidden 隐藏域
image 图片区域
password 密码输入文本框
radio 单选按钮组件
reset 重置表单按钮
submit 提交表单按钮
text 文本输入框
***********************************************************************
id是唯一标识符,不允许有重复值(类似数据表的主键,pk),可以通过它的值来获得对应的html标签对象。(如果在同一页面代码中,出现重复的id,会导致不可预料的错误)
js代码:document.getElementById("id_value")
根据指定的id获得它的对象引用
***********************************************************************
name和id的功能是一样的,同样用来标识html标签,但唯一不同的是name允许有重复的值。
js代码:document.forms[0].name或document.getElementsByName("name")
根据指定的name获得它的对象引用数组
***********************************************************************
value代表某个html标签的值
打个比方:<input type="text" name="seq" value="hello!" id="seq007" />
你将看到网页中文本框的内容为“hello!”
///////////////////////////////////////////////////////////////////////
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script>

</script>
</head>
<body>
<form>
<input type="text" name="seq" value="" id="seq001" />
<input type="text" name="seq" value="" id="seq002" />
<input type="text" name="seq" value="" id="seq003" />
</form>
</body>
</html>
///////////////////////////////////////////////////////////////////////
document.getElementById("seq001")获得的是id=seq001的这个对象标签的引用
document.forms[0].seq
将返回网页中第一个表单里面所有name=seq的标签对象引用数组
document.getElementsByName("seq")
将返回网页中所有name=seq的标签对象引用数组

************************************************************************************

____________________________________________________________________________________

************************************************************************************

可以说几乎每个做过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,和param。例如为Object定义参数<PARAM NAME = "appletParameter" VALUE = "value">。

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

    当然HTML元素的Name属性在页面中也可以起那么一点ID的作用,因为在DHTML对象树中,我们可以使用document.getElementsByName来获取一个包含页面中所有指定Name元素的对象数组。

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



本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/jq_diy/archive/2009/04/02/4044413.aspx
分享到:
评论

相关推荐

    EL表达式 (详解)

    4) 1--EL表达式用${}表示,可用在所有的HTML和JSP标签中作用是代替JSP页面中复杂的JAVA代码. 2--EL表达式可操作常量 变量 和隐式对象. 最常用的 隐式对象有${param}和${paramValues}. ${param}表示返回请求参数...

    JDBC详解HTML-JDBC.pp

    getInt("id")或getSting("name"),返回当前游标下某个字段的值 5&gt;.释放数据库连接 rs.close(); ps.close(); /stat.close(); con.close(); 3、创建可滚动、更新的记录集 1&gt;.创建Statement时指定参数:该...

    Android WebView 缓存详解

    Android WebView 缓存详解 一. 两种缓存类型: 页面缓存:加载一个网页时的html、JS、CSS等页面或者资源数据,这些缓存资源是由于浏览器 的行为而产生,开发者只能通过配置HTTP响应头影响浏览器的行为才能间接地...

    PHP100视频教程 32:PHP5中Cookie与 Session详解

    1、Cookie和Session简介与区别Session信息是存放在server端,但session id是存放在client cookie的,当然php的session存放方法是多样化的,这样就算禁用cookie一样可以跟踪Cookie是完全保持在客户端的如:IE firefox...

    jquery html动态添加的元素绑定事件详解

    在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况: &lt;div id=testdiv&gt; &lt;ul&gt;&lt;/ul&gt; 假设我们要给ul动态添加的绑定click事件形成如下结果 &lt;div id=testdiv&gt; &lt;li name=apple&gt;apple &lt;li name=pear&gt;...

    PHP100视频教程 32:PHP5中Cookie与 Session详解.rar

    软件介绍 1、Cookie和Session简介与区别 Session信息是存放在server端,但session id是存放在client cookie的,当然php 的session存放方法是多样化的,这样就算禁用cookie一样可以跟踪 Cookie是完全保持在客户端...

    PHP100视频教程 (三十二、PHP5中Cookie与 Session详解)

    1、Cookie和Session简介与区别 Session信息是存放在server端,但session id是存放在client cookie的,当然php 的session存放方法是多样化的,这样就算禁用cookie一样可以跟踪 Cookie是完全保持在客户端的如:IE fire...

    HTML页面嵌入视频与JS控制切换视频示例详解

    首先,在页面中嵌入视频的HTML代码为: 复制代码代码如下: &lt;div id=”youku” class=”youku”&gt; &lt;object id=”obx” name=”obx” width=”290″ height=”260″&gt; &lt;param name=”movie” value=”...

    ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解及工程源码

    ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解 一、去http://cksource.com/下载这两个东西 二、去http://www.extjs.com/下载ext-2.3.0 三、将ext-2.3.0、CKEditor 3.0.1、ckfinder_asp_1.4,取出解压后的...

    jQuery取得iframe中元素的常用方法详解

    本文实例分析了jQuery取得iframe中元素的常用方法。分享给大家供大家参考,具体如下: jquery取得iframe中元素的几种...$(document.getElementById('iframeId').contentWindow.document.body).html() 显示iframe中body

    HTML基础必看—表单,图片热点,网页划区和拼接详解

    form id= name= method=post/get action=负责处理的服务端&gt; id不可重复;name可重复;get提交有长度限制,并且编码后的内容在地址栏可见,post提交无长度限制,且编码后内容不可见。 &lt;/form&gt; 1、文本输入 ...

    html入门到放弃笔记

    作用:保留源文档中的回车 和 空格 的作用 &lt;pre&gt;&lt;/pre&gt; 8、分区元素 1、块分区元素 语法:&lt;div&gt;&lt;/div&gt; 作用:布局 2、行内分区元素 语法:&lt;span&gt;&lt;/span&gt; 作用:设置同一行文字内的不同样式 9、行内元素 与...

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

    这篇文章不做深入研究,只把各种用法和坑做一个总结。 JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名...

    超清晰的document对象详解

    document对象是JavaScript中最基本、最重要的对象之一,它提供了访问和操作HTML文档的各种方法和属性。在本文中,我们将详细介绍document对象的各种属性和方法,并通过实例代码来说明它们的使用。 document对象的...

    苹果8XPC和手机二合一完整版

    template/user/ 为系统会员中心的模版及相关css和js ****************************模板规范化管理 结束**************************** ****************************系统内置JS、CSS说明 开始*******************...

    详解HTML5通讯录获取指定多个人的信息

    我通过plus.contacts.getAddressBook和address.find的套用把通讯录里面的所有联系人的id和displayName获取出来,然后通过自己写的通讯录获取页面显示出来。 1、解决这个问题首先你要自己写一个js通讯录,这样可以把...

    详解JS实现系统登录页的登录和验证

    这篇文章用JS显示表单的登录以及验证和对键盘的监听,这里有两种方法,一种是无需用户验证直接登录,一种是需要账户密码匹配才可登录。 1. html代码 &lt;form id=user_login action=&...input class=code name=pa

    js实现全选反选不选功能代码详解

    本文实例为大家分享了js实现全选反选不选功能的具体代码,供大家参考,具体内容如下 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;meta charset='utf-8' /&gt;...input type='checkbox' name='...input type='button' name='id'

    Mvc提交表单的四种方法全程详解

    一,MVC HtmlHelper方法 1. Html.BeginForm(actionName,controllerName,method,...四,MVC Controller控制器和表单参数传递 MVC HtmlHelper方法 一,Html.BeginForm(actionName,controllerName,method,htmlAttrib

    详解vue在项目中使用百度地图

    第二步在项目中引入,具体如下 其中index.html存放地图链接,代码如下 然后在APP.vue里面实现,代码如下 &lt;div id=app&gt; &lt;div id=allmap ref=allmap&gt; &lt;router&gt;&lt;/router&gt; [removed] export default { name: ...

Global site tag (gtag.js) - Google Analytics