getElementByID() getElementsByName() getElementsByTagName()的区别

原创 2016年06月01日 14:44:59
getElementByID() getElementsByName() getElementsByTagName_r()的区别
Web标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问Documnent中的任一个标签:
 
1 getElementById(“ID”)
getElementById()可以访问Documnent中的某一特定元素,顾名思义,就是通过ID来取得元素,所以只能访问设置了ID的元素。
比如说有一个DIVIDdocid
<div id="docid"></div>
那么就可以用getElementById("docid")来获得这个元素。


2  getElementsByName(“Name”)
这个是通过name来获得元素,但不知大家注意没有,这个是get elemnets,复数elemnets代表获得的不是一个元素,为什么呢?
因为Documnent中每一个元素的ID是唯一的,但NAME却可以重复。打个比喻就像人的身份证号是唯一的(理论上,虽然现实中有重复),但名字重复的却很多。如果一个文档中有两个以上的标签NAME相同,那么getElementsByName()就可以取得这些元素组成一个数组。
 
比如有两个DIV
<div name="docname" id="docid1"></div>
<div name="docname" id="docid2"></div>
那么可以用getElementsByName("docname")获得这两个DIV,用getElementsByName("docname")[0]访问第一个DIV,用getElementsByName("docname")[1]访问第二个DIV
 
 
3 getElementsByTagName_r(“TagName”)
这是通过TagName(标签名称)来获得元素,一个Document中当然会有相同的标签,所以这个方法也是取得一个数组
下面这个例子有两个DIV,可以用getElementsByTagName("div")来访问它们,用getElementsByTagName("div")[0]访问第一个DIV,,用getElementsByTagName("div")[1]访问第二个DIV
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Byname,tag</title>
<style type="text/css">
<!--
    #docid1,#docid2{
    margin:10px;
    height:400px;
    width:400px;
    background-color:#999;}
-->
</style>
</head>
<body>
<div name="docname" id="docid1" onClick="bgcolor()"></div>
<div name="docname" id="docid2" onClick="bgcolor()"></div>
</body>
</html>
<script language="JavaScript" type="text/JavaScript">
<!--
function bgcolor(){
    var docnObj=document.getElementsByTagName("div");
    docnObj[0].style.backgroundColor = "black";
    docnObj[1].style.backgroundColor = "black";
}
-->
</script>

结:
总结一下标准DOM,访问某一特定元素尽量用标准的getElementById(),访问标签用标准的getElementByTagName(),IE不支持getElementsByName()所以就要避免使用getElementsByName(),但getElementsByName()和不符合标准的document.all[]也不是全无是处,它们有自己的方便之处,用不用那就看网站的用户使用什么浏览器,由你自己决定了。
 
Javascript中的getElementById十分常用,但在标准的页面中,一个id只能出现一次,如果我想同时控制多个元素,例如点一个链接,让多个层隐藏,该怎么做?用class
版权声明:本文为博主原创文章,未经博主允许不得转载。

javascript 如何正确使用getElementById,getElementsByName(), and getElementsByTagName()

WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签。(1)getE...
  • lixuyuan
  • lixuyuan
  • 2011年07月19日 16:49
  • 6827

通过document.getElementsById来实现 复选框的全选,全部选,反选

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 无标题文档...
  • zsj523
  • zsj523
  • 2013年03月04日 20:22
  • 4110

关于getElementsByName("")的使用

在使用JavaScript写JSP页面时,我们经常使用getElementsByName("")方法。但是很多标签使用此方法并不可行。 name属性是input标签的内建属性,早期浏览器的get...
  • XiaoBenDanXY
  • XiaoBenDanXY
  • 2016年04月20日 14:23
  • 211

getElementById,getElementsByTagName,getElementsByName,getElementsByClassName的区别

大家有时候会对getElementById,getElementsByTagName,getElementsByName,getElementsByClassName这几个函数理解不小心搞混了,这几个...
  • sinat_24713805
  • sinat_24713805
  • 2016年11月24日 16:36
  • 2158

getElementById,getElementsByName,getElementsByTagName,getElementsByClassName四者之间的区别

在《Javascript DOM 编程艺术》与 W3school 中是这样定义的: getElementById():这个方法将返回一个与那个有着给定id属性值的元素节点对应的对象。 下面这个案例...
  • tashanhongye
  • tashanhongye
  • 2017年05月28日 20:05
  • 824

JavaScript中通过getElementsByName访问name集合对象

1、查找给定name属性的所有元素,这个方法将返回一个节点集合,也可以称为对象集合。   2、这个集合可以作为数组来对待,length属性的值表示集合的个数。   3、因为在html页面中,n...
  • u012110719
  • u012110719
  • 2015年08月25日 10:39
  • 6654

document.all与document.getElementsByName区别

当页面上的控件同名且多个的时候,从程序的严密角度出发,需要判断长度,而且有长度和没长度是两种引用方法.oEle= document.all.aaa ;//这里有一个aaa的对象,但我们不知道它现在长度...
  • cooling
  • cooling
  • 2007年04月28日 20:29
  • 2973

getElementById getElementsByName的用法与区别

标签: getElementById  getElementsByName  getElementsByTagName  getElementById:语法: document.getElementB...
  • lixuyuan
  • lixuyuan
  • 2011年07月19日 15:57
  • 2117

获取表单对象,得三种方法getElementById(), getElementsByName(), and getElementsByTagName() 和用法

   今天碰到了翻页不好用的问题,检查一下发现没有表单,加上去就好了,发现获取某个对象值的方法有很多,但是使用哪一个才是正规的途径那,问了同事,得出结论如下:  document.表单名称.对象名称....
  • zwhfyy
  • zwhfyy
  • 2007年03月13日 14:39
  • 9049

HTML: DOM getElementsByName() 方法与getElementById()

案例代码: 统计项 个数 英文字母 数字 ...
  • ztf312
  • ztf312
  • 2017年01月11日 09:15
  • 354
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:getElementByID() getElementsByName() getElementsByTagName()的区别
举报原因:
原因补充:

(最多只允许输入30个字)