举个简单的例子:
<form name="form1">
用户名:<input type=text name="username" id="username">
密码:<input type=password name="password" id="pwd">
</form>
如果我要获得用户名和密码;
JS用name获得的话,就得写成document.form1.username.value; document.form1.password.value;
用id获得: docuement.getElementById("username"); docuement.getElementById("pwd");
有时候name 可能会出现相同的名字,所以这时候我们用name获得就无法确定获得的是哪个值了。 document.getElemntsByName("username"); 这里得到的是一个数组。可以说几乎每个做过Web开发的人都问过,到底元素的ID和Name有什么区别阿?为什么有了ID还要有Name呢?! 而同样我们也可以得到最classical的答案:ID就像是一个人的身份证号码,而Name就像是他的名字,ID显然是唯一的,而Name是可以重复的。 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.getElementByIdx_x("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.getElementByIdx_x()方法,尽量不要直接使用NAME的值

区别js中name与id的简单方法的更多相关文章

  1. js中,三元运算的简单应用(?:)

    js中,三元运算的简单应用: var sinOrMul = ""; sinOrMul =(subType=="single")?("<span ...

  2. js中的splice方法和slice方法简单总结

    slice:是截取用的 splice:是做删除 插入 替换用的 slice(start,end): 参数: start:开始位置的索引 end:结束位置的索引(但不包含该索引位置的元素) 例如: va ...

  3. js中style.display=""无效的解决方法

    本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多 ...

  4. js中数组去重的几种方法

    js中数组去重的几种方法         1.遍历数组,一一比较,比较到相同的就删除后面的                 function unique(arr){                 ...

  5. JS 中深拷贝的几种实现方法

    JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是 ...

  6. js中判断数据类型的四种方法总结

    js中判断数据类型的四种方法 前言 在js中,我们经常需要判断数据的类型,那么哪些方法可以用来判断数据的类型呢?哪种方法判断数据类型最准确呢? 我们来一个个分析: 1.typeof typeof是一个 ...

  7. [转]html js中name和id的区别和使用分析

    js中web页面元素的调用可以有两种识别方法:id和name 自己在用的过程中总结一下id和name的使用区别. 一,使用范围 除 BASE, HEAD, HTML, META, SCRIPT, ST ...

  8. 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂

    浅谈JS中的!=.== .!==.===的用法和区别   var num = 1;     var str = '1';     var test = 1;     test == num  //tr ...

  9. js中的Map对象的简单示例

    es6提供一个对象Map, 其功能类似于java中的Map, 下面是java中的Map和js中的Map的简单对比: js中的Map.set()相当于java中的Map.put(), js中的Map.s ...

随机推荐

  1. FLV文件格式官方规范详解

    ——如果要学习一个新的知识点,官方手册可能是最快的途径.查看网上其他人的总结也许入门更快,但是要准确,深入,完整,还是要看官方手册.   以下内容来自对官方文档Video File Format Sp ...

  2. net 串口通讯 网口通讯(Socket)

    1.串口通讯 2.网口(Socket) 源码下载:源码附件

  3. 如何使用linq读取DataTable集合?AsQueryable() 和 AsEnumerable()区别?

    一.准备工作 引入linq和data 相关的using命名空间 DataTable dt=new DataTable();//dt的来源可以是多个地方,比如:数据库,Excel等等.我这里使用Exce ...

  4. .Net Core 自定义配置源从配置中心读取配置

    配置,几乎所有的应用程序都离不开它..Net Framework时代我们使用App.config.Web.config,到了.Net Core的时代我们使用appsettings.json,这些我们再 ...

  5. rocketmq学习

    官网地址 安装name server和broker git clone https://github.com/apache/incubator-rocketmq.git cd incubator-ro ...

  6. 验证resneXt,densenet,mobilenet和SENet的特色结构

    简介 图像分类对网络结构的要求,一个是精度,另一个是速度.这两个需求推动了网络结构的发展. resneXt:分组卷积,降低了网络参数个数. densenet:密集的跳连接. mobilenet:标准卷 ...

  7. Spring 事务传播行为实验

    一.Propagation : key属性确定代理应该给哪个方法增加事务行为.这样的属性最重要的部份是传播行为.有以下选项可供使用: PROPAGATION_REQUIRED--支持当前事务,如果当前 ...

  8. require/load/include/extend的区别

    require 一般用于加载一个库,当多次使用require加载一个库时,只有第一次有效,后面的都会加载失败,也就是会返回"false",以为require会追踪文件是否被加载. ...

  9. spring boot和mybatis集成分页插件

    MyBatis提供了拦截器接口,我们可以实现自己的拦截器,将其作为一个plugin装入到SqlSessionFactory中. 首先要说的是,Spring在依赖注入bean的时候,会把所有实现MyBa ...

  10. Okhttp3上传多张图片同时传递参数

    之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片. 最近做项目,打算换个方法上传图片. Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片. ...