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. Kernel Page Global Directory (PGD) of Page table of Process created in Linux Kernel

    Kernel Page Global Directory (PGD) of User process created 在早期版本: 在fork一个进程的时候,必须建立进程自己的内核页目录项(内核页目录 ...

  2. [Linux Test Project] [PATCH] Fix an bad variable name erro in runltp script

    [PATCH] Fix an bad variable name erro in runltp script (/opt/ltp/runltp) Hi All,   I got an error fo ...

  3. Java 8实战之读书笔记二：基础知识

    好记性不如烂笔头,整理一些个人觉得比较重要的东西. 一.基础知识 第1章 为什么要关心Java 8 Java 8提供了一个新的API(称为"流", Stream),它支持许多处理数 ...

  4. pyspider启动错误解决（Python 3.7）

    问题一 安装好pyspider之后,在启动的时候,报出上图错误. 原因 async和await从 python3.7 开始已经加入保留关键字中. 参考: What’s New In Python 3. ...

  5. spring(四)：spring中给bean的属性赋值

    spring中给bean的属性赋值 xml文件properties标签设置 <bean id="student" class="com.enjoy.study.ca ...

  6. vue图片预加载

    目的: 图片预加载能够使得用户在浏览后续页面的时候,不会出现图片加载一半导致浏览不流畅的情况. 一.方法一 项目打开的时候要对图片进行预加载,在App.vue里面的beforeCreate添加预加载程 ...

  7. idea 创建 SSM + maven Java Web 项目流程

    idea 创建 SSM + maven Java Web 项目流程 一.idea 中选择File,New Project 新建项目 二.选择Maven,勾选上面的Create from archety ...

  8. 一、WebApi模型验证实践项目使用

    一.启语 前面我们说到,模型验证的原理(包含1.项目创建,2.模型创建,3.走通测试模型验证,4.在过滤器中处理返回json格式(非控制器内))-完全是新手理解使用的,新番理解 通常情况下,对于那些经 ...

  9. Android】Retrofit网络请求参数注解，@Path、@Query、@QueryMap...（转）

    对Retrofit已经使用了一点时间了,是时候归纳一下各种网络请求的service了. 下面分为GET.POST.DELETE还有PUT的请求,说明@Path.@Query.@QueryMap.@Bo ...

  10. 第三节：MySQL的调控按钮——启动选项和系统变量

    一.命令行上使用启动选项 启动选项的通用格式 --启动选项1[=值1] --启动选项2[=值2] ... --启动选项n[=值n]    禁止TCP/IP链接 略    修改MySQL服务的默认存储引 ...