Web标准下可以通过getElementById(), getElementsByName(), and getElementsByTagName()访问Documnent中的任一个标签：
 
1 getElementById(“ID”)
getElementById()可以访问Documnent中的某一特定元素，顾名思义，就是通过ID来取得元素，所以只能访问设置了ID的元素。
比如说有一个DIV的ID为docid：
<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。
 
 
3 getElementsByTagName(“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;

    }

-->

</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[]也不是全无是处，它们有自己的方便之处，用不用那就看网站的用户使用什么浏览器，由你自己决定了。

JS中获取元素使用getElementByID()、getElementsByName()、getElementsByTagName()的用法和区别的更多相关文章

  1. JS中获取元素属性的逆天大法

    给大家聊下js中获取元素属性的逆天大法,胆小慎入,切记切记!!! innerHTML.outerHTML.innerText .outerText.value.text().html(),val() ...

  2. js中获取元素的样式兼容性的写法

    1:设计元素的样式:el.style.color="red"||el.style["color"]="red"  获取元素的样式:el.st ...

  3. （知识点）JS中获取元素的样式

    首先我们已经知道了JavaScript如果获取一个元素的内部样式,你可以这样做: <div id="box" style="width:100px;height:1 ...

  4. js中for in 和 for each in的用法和区别

    区别一:           for in是javascript 1.0 中发布的.         for each in是作为E4X标准的一部分在javascript 1.6中发布的,而它不是EC ...

  5. JS中的！=、== 、！==、===的用法和区别。

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var num = 1;   var str = '1';   var test = 1;   t ...

  6. JS中的！=、== 、！==、===的用法和区别

    var num = 1; var str = '1'; var test = 1; test == num //true 相同类型 相同值 test === num //true 相同类型 相同值 t ...

  7. js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

    转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) ...

  8. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  9. 在Js中得到元素的子元素集合注意事项

    http://www.cnblogs.com/phonefans/archive/2008/09/04/1283739.html 在Js中得到元素的子元素集合注意事项 费话少说,直接看例子: 1 &l ...

随机推荐

  1. 如何在Python中使用Linux epoll

    如何在Python中使用Linux epoll 内容 介绍 阻塞套接字编程示例 异步套接字和Linux epoll的好处 epoll的异步套接字编程示例 性能考量 源代码 介绍 从2.6版开始,Pyt ...

  2. [Linux] 028 源码包安装过程

    1. 安装准备 安装 C 语言编译器 下载源码包 如:apache 相应源码包下载地址 2. 安装注意事项 源代码保存位置:/usr/local/src 软件安装位置:/usr/local 如何确定安 ...

  3. JAVA线程同步通信

    以下讲解Lock线程同步通信,也是比synchronized强大的一个功能点 先看一个常规的案例: 用户类 public class Person { public void eat(){ for(i ...

  4. spring-第十九篇AOP面向切面编程之增强处理的优先级

    1.从我们第十七篇举例了不同类型的增强处理. spring AOP采用和AspectJ一样的优先顺序来织入增强处理:在“进入”连接点时,具有最高优先级的增强处理将先被织入(在给定的两个Before增强 ...

  5. LuaLuaMemorySnapshotDump-master

    https://codeload.github.com/yaukeywang/LuaMemorySnapshotDump/zip/master

  6. 03.Linux-CentOS系统user用户改密码问题

    问题:[user@localhost ~]$ passwdChanging password for user user.Changing password for user.(current) UN ...

  7. Django——Ajax相关

    Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输的数 ...

  8. mesos,marathon,haproxy on centos7 最完美安装教程

    前言 本教程参考 http://blog.51cto.com/11863547/1903532 http://blog.51cto.com/11863547/1903532 官方文档等... 系统:c ...

  9. sql中使一个字段升序，一个字段降序

    ORDER BY _column1, _column2; /* _column1升序,_column2升序 */ ORDER BY _column1, _column2 DESC; /* _colum ...

  10. String、StringBuffer、StringBuilder详解

    String类 字符串广泛应用在java编程中,String类在java.lang包中,String类是final修饰的,不能被继承,String类对象创建后不能修改,由0或多个字符组成,包含在一对双 ...