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. 在eclipse中maven web项目部署到tomcat，访问不了

    修改eclipse中tomcat发布路径后,能正常访问

  2. angular中的等号（==）判定

    使用angularjs的时候会使用到其中的表达式,其中有相等的判断.由于js有==和===的区别,于是就想看看是否相同.自己稍微做了一点测试,一看便知. 先给结论:angularjs表达式中的==和= ...

  3. installshield学习笔记

    看预定义常量的值:SprintfBox(INFORMATION,"","%d",变量值);     自定义常量:#define MAXCOUNT 1000;#d ...

  4. python生产者消费者模型

    业界用的比较广泛,多线程之间进行同步数据的方法,解决线程之间堵塞,互相不影响. server --> 生产者 client --> 消费者 在一个程序中实现又有生产者又有消费者 ,生产者不 ...

  5. HDU猜数字

    G - 猜数字 Time Limit:10000MS       Memory Limit:32768KB       64bit IO Format:%I64d & %I64u Descri ...

  6. Linux下安装awstats日志统计分析

    1. 下载安装 cd /data/software wget http://prdownloads.sourceforge.net/awstats/awstats-7.0-1.noarch.rpm 2 ...

  7. MySQL字段自增自减的SQL语句

    MySQL的自增语句大家应该都很熟悉 也很简单 update `info` set `comments` = `comments`+1 WHERE `id` = 32 这样就可以了,但是有时候我们会涉 ...

  8. CodeForces 698B Fix a Tree

    并查集,构造. 先看一下图的特殊性,按照这种输入方式,一个点的入度最多只有$1$,因此,问题不会特别复杂,画画图就能知道了. 如果给出的序列中已经存在$a[i]=i$,那么随便取一个$a[i]=i$的 ...

  9. PAT 团体程序设计天梯赛-练习集 L1-019. 谁先倒

    给出甲.乙两人的酒量(最多能喝多少杯不倒)和划拳记录,请你判断两个人谁先倒. 输入格式: 输入第一行先后给出甲.乙两人的酒量(不超过100的非负整数),以空格分隔.下一行给出一个正整数N(<=1 ...

  10. jquery无法为动态生成的元素添加点击事件的解决方法

    遇到 jquery无法为动态生成的元素添加点击事件,谷歌一下,整理一下解决方法如下: (<li>中间的元素是动态生成的), 现在想为<i>添加点击事件, 例子如下: <d ...