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,不是数 ...
随机推荐
- python struct.pack中的对齐字节问题
最近测试涉及到了序列字节化相关问题,碰到一个头疼的问题 buff = struct.pack("3s","B00") print repr(buff) 输 ...
- 适合新手的Python爬虫小程序
介绍:此程序是使用python做的一个爬虫小程序 爬取了python百度百科中的部分内容,因为这个demo是根据网站中的静态结构爬取的,所以如果百度百科词条的html结构发生变化 需要修改部分内容. ...
- HTML5应用程序缓存Application Cache详解.RP
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- 图测试题部分总结.ing
一个无向连通图的生成树是含有该连通图的全部顶点的(极小连通子图) 在有向图G的拓扑序列中,若顶点Vi在顶点Vj之前,则下列情形不可能出现的是(D)A.G中有弧<Vi,Vj> B.G中有一条 ...
- Win提权思路,方法,工具(小总结)[转]
Win提权思路,方法,工具(小总结)[转] 看到这个文章,感觉整理的不错,就收藏下了. 介绍 windows提权总是被归结为适当的枚举.但要完成适当的枚举,你需要知道要检查和查找的内容.这通常需要伴随 ...
- fiddler----APP弱网测试
转自:http://www.51testing.com/html/01/n-3727001.html APP弱网模拟测试 移动端测试区别于PC端测试的一点就是网络的多变性:不同的网络环境和网络制式的差 ...
- 42、生鲜电商平台-商品的spu和sku数据结构设计与架构
说明:Java开源生鲜电商平台中商品的spu和sku数据结构设计与架构,包括数据库图标与架构分析. 1. 先说明几个概念. 电商网站采用在商品模块,常采用spu+sku的数据结构算法,这种算法可以将商 ...
- 容器编排之Kubernetes1.7.6安装与配置
kubernetes官网的安装教程是采用kubeadm init的方式,但是在生产环境当中,可能需要独自手动安装k8s,本文采用源码安装的方式,一步步搭建k8s的master节点和node节点. 系统 ...
- luogu1210 回文检测
Manacher 正确读法:抹内A撤(马拉车) (跟着假硕学英语) 我们把原来的字符串,通过玄学处理,变成只留下字母,且每两个字母之间有一个奇怪的字符的那种Manacher专用字符串. 建立双射关系f ...
- Window安装TensorFlow- GPU环境
[简述] 关于Window安装TensorFlow- GPU环境的文章我想网站已经有非常多了,但是为什么还要写这篇文章呢,就是被网上的文章给坑了.由于pip install tensorflow-gp ...