区别js中name与id的简单方法
举个简单的例子:
<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的简单方法的更多相关文章
- js中,三元运算的简单应用(?:)
js中,三元运算的简单应用: var sinOrMul = ""; sinOrMul =(subType=="single")?("<span ...
- js中的splice方法和slice方法简单总结
slice:是截取用的 splice:是做删除 插入 替换用的 slice(start,end): 参数: start:开始位置的索引 end:结束位置的索引(但不包含该索引位置的元素) 例如: va ...
- js中style.display=""无效的解决方法
本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多 ...
- js中数组去重的几种方法
js中数组去重的几种方法 1.遍历数组,一一比较,比较到相同的就删除后面的 function unique(arr){ ...
- JS 中深拷贝的几种实现方法
JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是 ...
- js中判断数据类型的四种方法总结
js中判断数据类型的四种方法 前言 在js中,我们经常需要判断数据的类型,那么哪些方法可以用来判断数据的类型呢?哪种方法判断数据类型最准确呢? 我们来一个个分析: 1.typeof typeof是一个 ...
- [转]html js中name和id的区别和使用分析
js中web页面元素的调用可以有两种识别方法:id和name 自己在用的过程中总结一下id和name的使用区别. 一,使用范围 除 BASE, HEAD, HTML, META, SCRIPT, ST ...
- 浅谈JS中的!=、== 、!==、===的用法和区别 JS中Null与Undefined的区别 读取XML文件 获取路径的方式 C#中Cookie,Session,Application的用法与区别? c#反射 抽象工厂
浅谈JS中的!=.== .!==.===的用法和区别 var num = 1; var str = '1'; var test = 1; test == num //tr ...
- js中的Map对象的简单示例
es6提供一个对象Map, 其功能类似于java中的Map, 下面是java中的Map和js中的Map的简单对比: js中的Map.set()相当于java中的Map.put(), js中的Map.s ...
随机推荐
- Django报错:ConnectionAbortedError: [WinError 10053] 你的主机中的软件中止了一个已建立的连接。
ajax请求时加上 async : false, $.ajax({ url:"{% url 'article:article_post' %}", {#一定不要写成小写了,坑了好久 ...
- Python: 读写Excel(openpyxl / win32com.client)
项目周报汇报的时候要做数据汇总,总是要从不同的excel文件中去获取数据最后汇总到一个excel表里面,所以决定用python直接写个自动化脚本来自动执行. 用python来读写excel,目前找了2 ...
- [.net]线程基础
关于线程的诞生 早期的16位Windows只有一个执行线程,在执行各种程序时,如果这个线程运行出现了问题,就会“冻结”整个系统,使得系统处于未响应状态.这是一件多么尴尬的事儿,无论是用户还是微软自己, ...
- iOS App的加固保护原理
本文由 网易云发布. 本文从攻防原理层面解析了iOS APP的安全策略.iOS以高安全性著称,但它并非金刚不坏之身.对于信息安全而言,止大风于青萍之末是上上策,杭研深入各个细节的研发工作,正是网易产 ...
- Vue 进阶之路(十)
之前的文章介绍了 vue 的组件化,本章我们来看一下 vue 中组件的原生事件. <!DOCTYPE html> <html lang="en"> < ...
- 1047 行 MySQL 详细学习笔记
https://blog.csdn.net/baidu_25310663/article/details/86517610 Windows服务 -- 启动MySQL net start mys ...
- TDDL与Spring Boot集成Version报错——跟踪与解决
先说背景:公司采用diamond+tddl,这套技术来做web管理.本人处于好奇率先体验了下spring-boot,于是就有了spring-boot+tddl的组合.但是jar包上线后,屡屡发现一条e ...
- 安装gitlab
安装源: git clone https://gitlab.com/gitlab-org/gitlab-ce.git -b 7-10-stable gitlab 安装文档: 在github上:gitl ...
- mysql8安装成功后忘记密码
我安装的是社区免安装版,安装成功后密码忘记了.参考了网上的一些方法,自己也做下笔记.仅供参考. 我安装的mysql版本下载地址:https://dev.mysql.com/downloads/mysq ...
- HttpClient和HttpURLConnection的使用和区别(上)
转自:点击打开链接 相信很多Android开发者碰到涉及到Http协议的需求时,都和我一样在犹豫是使用HttpClient还是使用HttpURLConnection呢.我在网上也搜索了很多文章,来分析 ...