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

原创 2016年06月01日 14:44:59
getElementByID() getElementsByName() getElementsByTagName_r()的区别
Web标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问Documnent中的任一个标签:
 
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
 
 
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
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

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

javascript getElementByID,getElementsByName,getElementsByTagName的区别

getElementByID,getElementsByName,getElementsByTagName区别注意:方法区分大小写!以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人、小孩、...

getElementByID getElementsByName getElementsByTagName的区别和总结 +js+Mxl+xmlhttp

WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签:1、getEl...
  • davidxj
  • davidxj
  • 2011年07月11日 14:07
  • 709

getElementByID和getElementsByName和getElementsByTagName和document.all的区别

document.all与document.getElementsByName区别 当页面上的控件同名且多个的时候,从程序的严密角度出发,需要判断长度,而且有长度和没长度是两种引用方法. oEle...

document.getElementsByName()与 document.getElementById()、document.getElementsByTagName()的区别

document.getElementsByName() 是根据控件名称获取这个控件对象,因为控件名称可以相同,返回的是一个对象数组。 document.getElementById() ...
  • sabic
  • sabic
  • 2011年12月05日 09:03
  • 1882

getElementByID getElementsByName getElementsByTagName用法详解

WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签: 1、getE...

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

WEB标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问DOCUMENT中的任一个标签。(1)getE...

etElementByID getElementsByName getElementsByTagName的区别和总结

etElementByID getElementsByName  getElementsByTagName的区别和总结 WEB标准下可以通过getElementById(), getElemen...
  • brokge
  • brokge
  • 2011年08月24日 15:30
  • 484

【转】document.getElementById与getElementsByName的区别(JavaScript)

1:id   就像身分证号,是唯一的,name就像姓名一样可以同名   2:一个元素定义了   id,引用该元素时直接用 id 属性,而   name   通常用在   form   中,且必须...
  • zw_2011
  • zw_2011
  • 2011年10月11日 11:01
  • 2701

document.getElementsByName()和getElementsByTagName

项目需要从数据库中获取数据,然后在页面上动态生成checkbox,由于生成的checkbox是多个,所以一开始,我使用了document.getElementsByName()来处理其选中、取值等,本...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:getElementByID() getElementsByName() getElementsByTagName()的区别
举报原因:
原因补充:

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