html代码id,浅谈html中id和name的区别实例代码
浅谈html中id和name的区别实例代码
更新时间:2008年07月28日 23:00:55 作者:
这个是form里面的name与id的区别
我们可以通过一段代码来分析一下其中的微妙差别:
在IE浏览器里,我们可以通过多少方法来索引到这个文本框对象?(为区别起见,我们把NAME和ID设成了不同的值)
1. oDemo
2. demoform.oDemo
3. document.all.oDemo
4. document.all.demoform.oDemo
5. document.forms[0].oDemo
6. document.forms['demoform'].oDemo
7. document.forms['demoform'].childNodes[0]
8. document.forms['demoform'].elements[0]
9. document.getElementById('oDemo2')
以上9种索引方法在IE6里面全部通过返回值测试,不过值得注意的是最后一种:在IE6里,我把索引对象写成
document.getElementById('oDemo'),浏览器也能正确索引到对象,真是可怕的容错性啊!!
接着问题来了,我们把这段代码放在Mozilla Firefox 1.0里再执行一次,只有第7种方法返回“undefined”,其他的方法可以正确
索引到对象,不过由于第3、4种方法用到了document.all这个IE专有对象,FF1.0虽然返回了正确的值,不过却在控制台里发出了警
告:警告:非标准的属性 document.all。请使用 W3C 的标准形式 document.getElementById() 。
接下来我们把HTML文本类型定义得严格一点,在源代码开头加上:
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
使HTML文本按照HTML4.01标准去解析,在IE6里照样全部通过返回值测试,不过在Mozilla Firefox 1.0里麻烦就大了,第3、4种方法
没有任何的返回值,而在控制台里发出了报错信息:错误: document.all has no properties ,而第7种方法依旧返回“undefined
”。
小 结
name原来是为了标识之用,但是现在根据规范,都建议用id来标识元素。
以下只能用name:
1. 表单(form)的控件名,提交的数据都用控件的name而不是id来控制。因为有许多name会同时对应多个控件,比如
checkbox和radio,而id必须是全文档中唯一的。此外浏览器会根据name来设定发送到服务器的request。因此如果用id,服务器是无
法得到数据的。
2. frame和window的名字,用于在其他frame或window指定target。
以下只能用id:
1. label与form控件的关联,
My Input
for属性指定与label关联的元素的id,不可用name替代。
2. CSS的元素选择机制,以#MyId的方式指定应用样式的元素,不能用name替代。
3. 脚本中获得对象:
IE支持在脚本中直接以id(而不是name)引用该id标识的对象。例如上面的input,要在脚本中获得输入的内容,可以直接以
MyInput.value来获得。
如果用DOM的话,则用document.getElementById("MyInput").value,如果要用name的话,通常先得到包含控件的form,例如
document.forms[0],然后从form再引用name,注意这样得到的是经过计算后将发送给服务器的值。
name与id的其他区别是:
id要符合标识的要求,比如大小写敏感,最好不要包含下划线(因为不兼容CSS)。而name基本上没有什么要求,甚至可以用数字
。
用CSS控制这个链接的停留样式,
可以这样写 #m_blog div.opt a:hover{color:#D57813} 或 #myLink:hover{color:#D57813}
NAME主要应用在交互式网页,表单提交给某个服务器端脚本后接收变处理量使用。从源代码的规范性和兼容性角度出发,如在客户端
脚本里要索引某个对象,建议用document.getElementById()方法,尽量不要直接使用NAME的值,当然如果不考虑兼容性,以上9种方
法都可以在IE里运行通过(IE5.0没测试过)。
附:测试源代码
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
['demoform'].childNodes[0].value)" />
['demoform'].elements[0].value)" />
相关文章
随着XHTML的逐渐推广流行,HTML 在许多场合已经显得过时。World Wide Web Consortium (W3C) 于 2000 年 6 月 26 日发布了 XHTML 的第一个版本作为推荐标准。2008-09-09
最近发现各大类库都能利用xxx.innerHTML=HTML片断来生成节点元素,再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML,但是IE可恶的innerHTML把这优势变成劣势。2014-06-06
ie中多id的调用方法...2007-03-03
创建IE各版本专属CSS IE中的if语句...2007-09-09
下面是我翻译的内容,是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧。2008-04-04
关于margin-left的示例代码...2007-05-05
在分配ID和类名时,尽可能保持与表现形式无关,例如contleft有可能以后希望出现在右边。2008-10-10
屏蔽IE浏览器(也就是IE下不显示)2008-12-12
IE 5.x/Win 和模型bug...2007-02-02
css写菜单:简洁注释版...2006-12-12
最新评论
html代码id,浅谈html中id和name的区别实例代码相关推荐
- 【网摘】 浅谈HTTP中GET与POST的区别
文章出处:http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html 浅谈HTTP中Get与Post的区别 Http定义了与服务器交互的不 ...
- 浅谈 JDBC 中 CreateStatement 和 PrepareStatement 的区别与优劣。
浅谈 JDBC 中 CreateStatement 和 PrepareStatement 的区别与优劣.
- 浅谈ajax中get与post的区别,以及ajax中的乱码问题的解决方法
一.谈Ajax的Get和Post的区别 Get方式: 用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及 ...
- 浅谈HTTP中Get与Post的区别_转
可参考:HTTP请求中POST与GET的区别 Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个UR ...
- 浅谈HTTP中Get与Post的区别[转 hyddd]
Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...
- 浅谈java中extends与implements的区别
Extends可以理解为全盘继承了父类的功能.implements可以理解为为这个类附加一些额外的功能:interface定义一些方法,并没有实现,需要implements来实现才可用.extend可 ...
- 浅谈html中button和submit的区别
首先从外观上submit和button,二者都以按钮的形式展现,看起来没有区别. 当然在声明上,一个是<input type="button"> 另一个是<inp ...
- 浅谈HTTP中Get与Post的区别
Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...
- 浅谈MySQL中utf8和utf8mb4的区别
一.什么是UTF8MB4? 我们在使用PhpMyAdmin管理面板时,可以在首页看到名为"Server connection collation"(服务器连接排序规则)的选项,用来 ...
最新文章
- 谷歌发布 RLDS,在强化学习生成、共享和使用数据集
- JavaScript中的JSON
- UA PHYS515A 电磁理论V 电磁波与辐射3 偏振
- 【Matlab】怎么修改Excel单元格颜色?
- 34.对象 GC,GC属性,影响GC的因素,GC步骤,GC算法,安全区/安全区域,新生代,老年代等介绍
- python3+requests:get/post请求
- 高等数理统计(part1)--随机变量及其分布函数
- React-引领未来的用户界面开发框架-读书笔记(四)
- C语言编程时没思路,c语言编程问题
- 发布到服务器接口404_新版本永雾林渊周五来袭,404战队真的404了
- DSP之外部设备连接接口之HPI
- Vue指令v-show和v-if的区别
- Python基础知识之面向对象编程
- 【前端】【HTML+CSS+JavaScript(JS)】简易工资计算器的实现
- 数三角形个数规律公式
- 大饼“U”形底?ETR开始
- 【uni-app】基础
- 计算机房灭火器单具基准,灭火器配置数量的参考
- RISC-V架构生态及相关学习记录
- Telegraf-Influxdb-Grafana容器化部署拓展(Https、AD域、告警集成)并监控Cisco设备指标
热门文章
- Linux内核深入理解定时器和时间管理(2):clocksource 框架
- Linux内核空间内存申请函数kmalloc、kzalloc、vmalloc的区别
- powerbuilder只能支持cp850字符集吗_杜比全景声是什么?哪些电视支持杜比全景声...
- web前端基础(11html5和css)
- javaWeb(入门基础详解)
- shape的xml用法
- python2.7更新pip_CentOS升级Python2.6到Python2.7并安装pip
- 原版win7集成usb3.0驱动_windows7的不老传说,十代U安装win7教程
- 计算机网络流媒体播放,流媒体播放方式包含以下哪几种方式
- html页面送值转换,在静态页面html中跳转传值