举个简单的例子:
<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. Flash(as3) 调整显示对象颜色

    在游戏开发中改变显示对象的颜色是比较常见的操作,那么除了在FlashCS中调整,AS3又提供了怎样的方式呢? ColorTransform 这个类是轻量级的应用,其构造参数如下: ColorTrans ...

  2. python的标准库

    第三方库放的位置:E:\python\Lib\site-packages 通过命令查询:import sys print (sys.path) 标准库:E:\\python\\lib 第三方库的上一级 ...

  3. List泛型集合对象排序

    本文的重点主要是解决:List<T>对象集合的排序功能. 一.List<T>.Sort 方法 () MSDN对这个无参Sort()方法的介绍:使用默认比较器对整个List< ...

  4. 构建NetCore应用框架之实战篇(二):BitAdminCore框架定位及架构

    本篇承接上篇内容,如果你不小心点击进来,建议重新从第一篇开始完整阅读. 构建NetCore应用框架之实战篇索引 一.BitAdminCore框架简介 从前篇论述我们知道,我们接下来将要去做一个管理系统 ...

  5. pageadmin CMS网站制作教程:

    pageadmin CMS网站建设教程:模板中如何实现信息数据共享 很多时候信息数据需要共享,一个最常用的应用场景就是手机版(独立手机,非响应式)本共享pc版本数据,下面以这个场景为例讲解. 假设手机 ...

  6. Kettle 使用入门

    Kettle是一款国外开源的ETL工具,纯java编写,可以在Window.Linux.Unix上运行,数据抽取高效稳定. 本文介绍一个入门例子:使用Kettle从动态指定的文件名对应的文本文件里抽取 ...

  7. 隐藏导航栏,偏移20PX

    1:让ViewController在NavigationBar下面开始布局. automaticallyAdjustsScrollViewInsets作用 当Controller上存在唯一一个UISc ...

  8. collectd+influxdb+grafana

    今天一天都在弄这个,最终发现在配置grafana的时候选择influxdb的版本时候选错了.(挠头~~~!!!) collectd的配置还算简单,基本看过配置文件就比较清楚. influxdb(Go ...

  9. 题解 P3628 【[APIO2010]特别行动队 】

    题目大意 ​ 给你一个序列, 将这个序列分成若干段, 每一段的贡献为 \(ax ^ 2 + bx + c\)(x 为 这一段的权值之和) 具体思路 50pts ​ 考虑Dp, 设\(Dp_i\)为前i ...

  10. php的GC机制

    在php5.3版本之前, php变量的回收机制只是简单的通过计数来处理(当refcount=0时,会回收内存),但这样会出现一个问题 $a=array("str"); $a[]=& ...