getElementsByTagName 、 getElementsByName 、getElementById区别
WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签:
getElementById()
getElementById()可以访问DOCUMENT中的某一特定元素,顾名思义,就是通过ID来取得元素,所以只能访问设置了ID的元素。(唯一一个)
比如说有一个DIV的ID为do:
<div id="do"></div>
那么就可以用getElementById("do")来获得这个元素。
因为DOCUMENT中每一个元素的ID是唯一的,但NAME却可以重复。打个比喻就像人的身份证号是唯一的(理论上,虽然现实中有重复),但名字重复的却很多。
getElementsByName()
这个是通过NAME来获得元素,但不知大家注意没有,这个是GET ELEMENTS,复数ELEMENTS代表获得的不是一个元素,为什么呢?
如果一个文档中有两个以上的标签NAME相同,那么getElementsByName()就可以取得这些元素组成一个数组。
比如有两个DIV:
<div name="doname" id="do1"></div>
<div name="doname" id="do2"></div>
那么可以用getElementsByName("doname")获得这两个DIV,用getElementsByName("doname")[0]访问第一个DIV,用getElementsByName
getElementsByTagName()
这个呢就是通过TAGNAME(标签名称)来获得元素,一个DOCUMENT中当然会有相同的标签,所以这个方法也是取得一个数组。
假如有两个DIV,可以用getElementsByTagName("div")来访问它们,用 getElementsByTagName("div")[0]访问第一个DIV,用getElementsByTagName("div")[1]访问第二个DIV。
还有一点就是
var oDoc=document.getElementById("doc"); //只能用 document获取
var adiv=document.getElementsByTagName("div"); //既可以用document获取
var adiv=oDoc.getElementsByTagName("div"); //还可以通过父级的id获取
初学站到,有问题欢迎指出。
getElementsByTagName 、 getElementsByName 、getElementById区别的更多相关文章
- js 取值 getElementsByTagName,getElementsByName
getElementsByTagName,getElementsByName 获取的值是数组的所以用[0][1]引用 1 <select multiple size="2" ...
- autohotkey 自动登录输入用户名密码 getElementsByTagName/getElementsByClassName/getElementById
针对button未设置id的.可以通过getElementsByTagName获取button的对象数组,再明确其在对象数组中的位置,如第4个button,通过[3]获取.再调用此对象的click() ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- web前端:js
内嵌样式<script></script> alert(“123”)弹出对话框 document.write(“test”) 引入方式 <title></ti ...
- querySelector和getElementById方法的区别
一.querySelector() 的定义 querySelector() 方法选择指定 CSS 选择器的第一个元素 querySelectorAll() 方法选择指定的所有元素 二.与 getEle ...
- getElementsByTagName
1.getElementsByTagName * document.getelementByID(id名称)* 通过id名称获取元素,它只有一个主语,docment(整个文档)** getElemne ...
- 前端必备的js知识点(转载)
1.本文主体源自:http://www.cnblogs.com/coco1s/p/4029708.html,有兴趣的可以直接去那里看,也可以看看我整理加拓展的.2.js是一门什么样的语言及特点? ...
- 《Javascript高级程序设计第3版》精华总结
一.JavaScript简介 1.1 javascript简史 1.2 javascript实现 + javascript是一种专为网页交互而设计的一种脚本语言,javascript由三大部分组成 ...
- document.all的详细解释(document.all基本上所有浏览器可用!)
从何而来从IE4开始IE的object model才增加了document.all对象,MSDN中也对 Object.all 有详细的说明,Object.all是个HTMLCollection,不是数 ...
随机推荐
- GCD 学习(三)Main&Global Dispatch Queue
摘录自:http://zhuyanfeng.com/archives/3066 Main Dispatch Queue是在主线程中执行任务的Dispatch Queue.因为主线程只有1个,所以Mai ...
- 10.model/view实例(1)
1.如图显示一个2x3的表格: 思考: 1.QTableView显示这个表 2.QAbstractTableModel作为模型类. 3.文档中找到subclass的描述 When subclassin ...
- SDUT 1488 数据结构实验:连通分量个数
数据结构实验:连通分量个数 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 在无向图中,如 ...
- 数据结构_just_sort
问题描述 给定两个序列 a b,序列 a 原先是一个单调递增的正数序列,但是由于某些原因,使得序列乱序了,并且一些数丢失了(用 0 表示).经过数据恢复后,找到了正数序列 b ,且序列 a 中 0 的 ...
- Java/C++中数组的区别
1. 数组名区别 -------------------------------------- 1. java中不用说,本着一切皆对象的原则,所以java中的数组也是对象.那么数组类是哪个,当然不是j ...
- Bulma 源码解析之 .columns 类
{说明} 这一部分的源码内容被我简化了,另外我还额外添加了一个辅助类 is-grow. .columns // 修饰类 &.is-centered justify-content: cente ...
- 泛型List<T>转存为XML文档
经常会有这情况,在程序处理结果为泛型List<T>,但为了能把这些集合输出XML文档.Insus.NET就因此问题,演示一个范例.在程序中,创建一个类: List<T>的集合手 ...
- 十天入门java教程 Day02
1,常量,变量的理解 常量,程序运行过程中,不能改变的,叫常量. 变量,程序运行过程中,改变的,叫变量. 2,变量的理解 变量,用来存储数据的,数据类型,存放哪种数据的种类. 变量的概念:程序运行期间 ...
- sonar Failed to execute goal org.sonarsource.scanner.maven:sonar-maven-plugin:3.4.0.905:sonar
背景: 今天在项目根目录执行maven sonar:sonar ,报错信息如下,然后就各种的搜,折腾了多半天天也没找出解决办法,最后打算放弃时,看到一遍文章说是mysql max_allowed_p ...
- [haut] 1281: 邪能炸弹 dp
题目描述 正在入侵艾泽拉斯的古尔丹偶然间得到了一颗邪能炸弹,经过研究,他发现这是一颗威力极其巨大且难以控制的炸弹.但是精通邪能的古尔丹突然有了一个大胆的想法,他对炸弹进行了一些小小的改造.这使得炸弹需 ...