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

（1）getElementById()：

getElementById()可以访问DOCUMENT中的某一特定元素，顾名思义，就是通过ID来取得元素，所以只能访问设置了ID的元素。

（2）getElementsByName()：

该方法是通过NAME属性来获得元素，但注意区别：getElementById()中是element,而getElementsByName()是elements。显而易见，getElementsByName()返回值有很多，这是因为DOCUMENT中每一个元素的ID是唯一的，但NAME却可以重复。如果一个文档中有两个以上的标签NAME相同，那么getElementsByName()就可以取得这些元素组成一个数组。

例如：

<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()
                      getElementsByTagName()是通过TAGNAME（标签名称）来获得元素，一个DOCUMENT中当然会有相同的标签，所以这个方法也是取得一个数组。

例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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;
}
-->
</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，当然，同一个class是可以允许在页面中重复出现的，那么有没有getElementByClass呢？没有， 但是可以解决：

//Create an array

var allPageTags = new Array();

function hideDivWithClasses(theClass) {
//Populate the array with all the page tags

var allPageTags=document.getElementsByTagName("div");
//Cycle through the tags using a for loop

for (i=0; i<allPageTags.length;i++)

{

if (allPageTags[i].className==theClass) {
//Manipulate this in whatever way you want
allPageTags[i].style.display='none';
}
}
}

鉴于getElementById()方法使用比较频繁，我在网上搜集了一下关于此方法的一些用法。

document.getElementById("link").href; 
document.getElementById("link").target; 
document.getElementById("img").src; 
document.getElementById("img").width; 
document.getElementById("img").height; 
document.getElementById("input").value; 
那么如何取得<div></div>以及<a></a>之间的值呢？如<div id="div">aaa</div>中的aaa，<a href="#" id="link">bbb</a>中的bbb，也很简单，利用innerHTML就可以了： 
document.getElementById("div").innerHTML; 
document.getElementById("link").innerHTML;

getElementById 方法 
返回具有指定 ID 属性值的第一个对象的一个引用。 
语法 
oElement = document.getElementById(sIDValue) 
参数 
sIDValue 必选项。指明 ID 属性值的字符串 
返回值 
返回 ID 属性值与指定值相同的第一个对象。    //返回值是一个对象
注释 
如果 ID 属于一个集合，getElementById 方法返回集合中的第一个对象。 
getElementById 方法与使用 all 集合上的 item 方法等同。例如，以下代码样本表示如何从 document 对象中取回 ID 为 oDiv 的第一个要素。 
使用 DHTML 对象模型： 
var oVDiv = document.body.all.item("oDiv"); 
使用文档对象模型(DOM)： 
var oVDiv = document.getElementById("oDiv"); 
示例

以下例子表示如何使用 getElementById 方法返回 ID 属性值 oDiv 的第一次出现。 
<script> 
function fnGetId(){ 
// Returns the first DIV element in the collection. 
var oVDiv=document.getElementById("oDiv1"); 
} 
</script> 
<DIV ID="oDiv1">Div #1</DIV> 
<DIV ID="oDiv2">Div #2</DIV> 
<DIV ID="oDiv3">Div #3</DIV> 
<INPUT TYPE="button" VALUE="Get Names" onclick="fnGetId()"> 
getElementById 方法 
返回具有指定 ID 属性值的第一个比如说有个网页中有个text框的id叫text1 
getElementById(text1)就能得到这个text1框的对象,并使用text框的所有属性和方法 
这个是JS的一个方法，意思是通过控件ID取得元素的值，如一个form里包函text、label等，他们都是FORM的元素，有一个分配的ID，getElementById()是取得这些元素的text值的。

javascript 如何正确使用getElementById，getElementsByName(), and getElementsByTagName()的更多相关文章

  1. document.getElementById(), getElementsByname(),getElementsByClassName(),getElementsByTagName()方法表示什么以及其意义

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. getElementByID、getElementsByName、getElementsByTagName实例详解

    getElementByID.getElementsByName.getElementsByTagName实例详解 本文通过实例,详细介绍了getElementByID.getElementsByNa ...

  3. JS中获取元素使用getElementByID()、getElementsByName()、getElementsByTagName()的用法和区别

    Web标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问Documnent中的任一个标签:   1 g ...

  4. getElementById，getElementsByName，getElementsByTagName的区别

    1.getElementById 作用:一般页面里ID是唯一的,用于准备定为一个元素 语法: document.getElementById(id) 参数:id :必选项为字符串(String) 返回 ...

  5. JavaScript中querySelector()和getElementById()（getXXXByXX）的区别

    在日常开发中,使用JavaScript获取元素的时候,最常用的方法就是document.getElementById(getXXXByXX)方法.但是最近发现有很多地方使用的是querySelecto ...

  6. JavaScript如何正确处理Unicode编码问题！

    原文:JavaScript 如何正确处理 Unicode 编码问题! 作者:前端小智 Fundebug经授权转载,版权归原作者所有. JavaScript 处理 Unicode 的方式至少可以说是令人 ...

  7. 区别getElementByID,getElementsByName,getElementsByTagName

    以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人.小孩.老人)等. 1. ID 是一个人的身份证号码,是唯一的.所以通过getElementById获取的是指定的一个人. 2. Name ...

  8. JS中getElementByID,getElementsByName,getElementsByTagName的区别

    <input type="text" name="mynumber" id="mynum1" value="" / ...

  9. getElementByID,getElementsByName,getElementsByTagName

    <input type="checkbox" name="hobby" id="hobby1"> 音乐 <input ty ...

随机推荐

  1. servlet就实现在线用户表

    在学习servlet的过程中,学习了如何用servlet实现在线用户表. 只有服务器处于开机状态才会有在线用户表的存在,在服务器关机的情况下自然就不存在在线用户表的说法:所以,楼主认为在线用户表的信息 ...

  2. 【小技巧】C#的saveFileDialog和openFileDialog的用法总结

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  3. NDEF消息解析实例[转]

      问题:按照NDEF消息格式来解析下列Hex串? D1 02 1F 53 70 91 01 0E 54 02  65 6E 68 65 6C 6C 6F 20 77 6F  72 6C 64 51 ...

  4. Hibernate 异常 集锦

    异常1.Error parsing JNDI name [foo] 异常信息摘要: org.hibernate.engine.jndi.JndiException: Error parsing JND ...

  5. JS时间日期格式转换

      第一种: function ConvertJSONDate(jsondate) {        if (jsondate != "" && jsondate  ...

  6. Java参数传递问题

    参考资料:http://blog.sina.com.cn/s/blog_59ca2c2a0100qhjx.html   http://blog.csdn.net/a412588063/article/ ...

  7. 转：Web性能压力测试工具之ApacheBench（ab）详解

    PS:网站性能压力测试是性能调优过程中必不可少的一环.只有让服务器处在高压情况下才能真正体现出各种设置所暴露的问题.Apache中有个自带的,名为ab的程序,可以对Apache或其它类型的服务器进行网 ...

  8. CodeForces 700B Connecting Universities

    统计每一条边的贡献,假设$u$是$v$的父节点,$(u,v)$的贡献为:$v$下面大学个数$f[v]$与$2*k-f[v]$的较小值. #pragma comment(linker, "/S ...

  9. linux搭建phantomjs+webdriver+testng+ant自动化工程

    因为项目的原因,需要将脚本在linux环境无浏览器化去跑,那么原有的在windows系统下有浏览器化的自动化脚本场景就不适用了,这里给出linux系统下搭建phantomjs+webdriver+te ...

  10. js--3目运算符

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...