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. vs2010帮助文档下载以及帮助查看器（H3Viewer）的使用

    在工作中遇到想查看vs2010的帮助文档.推荐使用H3Viewer.一个第三方的免费软件,独立于VS2010运行的帮助查看器.这方面的资料并不多.把本次自己使用的心得分享给大家. H3Viewer官方 ...

  2. console.log 加样式

    console.log("%c%s", "color: black; font-size: 18px;", "test")

  3. java命名

    Package 的命名 Package 的名字应该都是由一个小写单词组成. Class 的命名 Class 的名字必须由大写字母开头而其他字母都小写的单词组成 Class 变量的命名 变量的名字必须用 ...

  4. dump报文转换为wrieshark报文

    我们开发中经常会出原始的报文,如下所示: 45 00 01 3d 8e 6a 00 00 80 11 ab 46 00 00 00 00 ff ff ff ff 00 44 00 43 01 29 6 ...

  5. RPC框架基本原理(三)：调用链路分析

    本文主要阐述下RPC调用过程中的寻址,序列化,以及服务端调用问题. 寻址 随机寻址 从可用列表中,随机选择地址 一致性寻址 可用服务地址一致性hash管理:根据可服务的地址,构造treemap,计算c ...

  6. underscore.js中的节流函数debounce及trottle

    函数节流   throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...

  7. 常用几种Java Web容器

    Web服务器是运行及发布Web应用的容器,只有将开发的Web项目放置到该容器中,才能使网络中的所有用户通过浏览器进行访问.开发Java Web应用所采用的服务器主要是与JSP/Servlet兼容的We ...

  8. mongodb集群+分片部署(二)

    机器:10.165.38.68    10.165.38.72 部署包:mongodb-linux-x86_64-rhel55-3.0.2.tgz(百度云盘下载地址:http://pan.baidu. ...

  9. python：os.path

    __file__ " here = os.path.abspath(os.path.dirname(__file__)) 当"print os.path.dirname(__fil ...

  10. const形参与非const形参

    在程序设计中我们会经常调用函数,调用函数就会涉及参数的问题,那么在形参列表中const形参与非const形参对传递过来的实参有什么要求呢? 先来看一个简单的例子: #include <iostr ...