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. Dubbo的详解

    1.Dubbo是什么? Dubbo是一个分布式服务框架,简言之:dubbo就是个服务框架,如果没有分布式的需求,其实是不需要用的,只有在分布式的时候,才有dubbo这样的分布式服务框架的需求,并且本质 ...

  2. vue 数组中嵌套的对象添加新属性--页面更新

    vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735

  3. 推荐一个 Java 里面比较牛逼的公众号！

    今天给大家推荐一个牛逼的纯 Java 技术公众号:Java技术栈,作者:栈长. Java程序员.Java爱好者扫码关注吧! 确实牛逼,几十万人关注了,原创文章350+,好友都 3000+ 关注了. 栈 ...

  4. Robot Framework 常见问题处理方式

    1.运行testcase报错error 2解决办法 打开python的scripts目录,看看是否有pybot.bat文件,没有则创建一个 pybot.bat内容: @Echo off python ...

  5. <转载>面试官: 讲讲MySql表设计需要注意什么?

    作者:孤独烟 出处: http://rjzheng.cnblogs.com/ 综述 近期由于复习了一下MySQL的内容看到一篇比较好的文章,转载分享一下.大家看完,其实能避开很多坑.而且很多问题,都是 ...

  6. 4、numpy——创建数组

    1.普通创建——np.array() 创建数组最简单的方法就是使用array函数.它接收一切序列型的对象(包括其他数组),然后产生一个新的含有传入数据的Numpy数组. import numpy as ...

  7. 第一天学习如何使用markdown写日志，一起来看看成果吧！

    目录 一级标题 二级标题 一级标题 二级标题 ==黄色== one two three one two three 性别 年龄 男 150 H~2~o hello markdown hello mar ...

  8. python第一部分小结

       1.python的种类                                                                              Cpython: ...

  9. Linux学习笔记5（2）-CentOS7中Tomcat8修改jvm内存配置

    1.进入tomcat的bin目录,比如我的在 /usr/local/apache-tomcat-8.5.16/bin 2.创建新的文件setenv.sh vi setenv.sh 并在此文件中添加以下 ...

  10. 使用HystrixCommand封装http请求

    1.引入依赖 要排除hystrix-core里的archaius-core,否则报错 <dependency> <groupId>com.netflix.hystrix< ...