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. lucene 自定义评分

    摘自:http://blog.csdn.net/seven_zhao/article/details/42708953 1.基于FunctionQuery,(1)创建类并继承ValueSource:( ...

  2. win7提示Xshell5提示缺少msvcp110.dll解决办法

    下载地址: http://www.microsoft.com/zh-CN/download/details.aspx?id=30679 X86和X64的都下载下来,安装好后重启计算机,就OK了

  3. MQ队列堆积太长，消费不过来怎么办(转)

    转自:http://windwrite.com/archives/603 我们现有的业务就面临此问题,消息生产太快,消费不过来,导致队列堆积很长,把服务器内存耗尽,这时RabbitMQ的处理能力很低下 ...

  4. java javaScript实现遮罩层 动态加载

    通过java.JavaScript和css实现点击按钮后出现灰色遮罩层,并显示动态加载的字样,提高用户体验,废话不多说,上代码(写这个博客的原因是网上代码太多新手根本不知道哪里对哪里,这里剔除所有无关 ...

  5. RTL-SDR基础环境安装

    安装 cmake and libusb apt-get install cmake apt-get -dev 安装 RTL-SDR sudo apt-get install rtl-sdr kali已 ...

  6. js--学习方法之2-转

    再说几点忠告 1,不要着急看一些复杂网页效果的代码,这样除了打击你自信心,什么也学不到.没达到一定的武功水平,割了小JJ也学不会葵花宝典的. 2,别急着加技术交流QQ群,加牛人QQ.如果你找张三丰交流 ...

  7. win2008服务器，fastCGI完美设置教程

    在WIN2008的IIS7上使用FASTCGI调用PHP-CGI.EXE,默认只有4个进程,这样对于大流量的网站为说,进程数不足带来的进程排队现象十分严重,解决方案如下.32位系统 http://ww ...

  8. CentOS安装Ruby组件

    ruby安装#安装ruby组件yum install ruby ruby-irb ruby-devel rubygems rpm-build -y#安装Apache服务器yum install htt ...

  9. Java 反射 Class类

    Java 反射 Class类 @author ixenos 摘要:Class类在反射中的地位.构造Class对象的三种方式.Class对象构造对应类型对象的三种方式 Class类在反射中的地位 位于j ...

  10. CSS3 学习小结

    写样式时有时遇到浏览器兼容问题:-webkit-transition:chrome和safari-moz-transition:firefox-ms-transition:IE-o-transitio ...