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. Node.js实战5：操作系统与命令行。

    Nodejs有一些内置的方法可以查询操作系统信息: 如: process.arch获取到系统是32位还是64位, process.platform可获取系统的类型. 例程: console.log(p ...

  2. 《JAVA设计模式》之外观模式(Facade)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述门面(Facade)模式的: 门面模式是对象的结构模式,外部与一个子系统的通信必须通过一个统一的门面对象进行.门面模式提供一个高层次的接口 ...

  3. [暑假集训Day4T1]羊圈

    ZYC同志开农场了????? 二分答案. 对于每一个二分出来的答案对其进行检查(check),检查是否有一个长度大于m的字段和的平均值大于mid.方法如下:先把原数组的每一个元素减去mid,储存进一个 ...

  4. Codeforces - 1194B - Yet Another Crosses Problem - 水题

    https://codeforc.es/contest/1194/problem/B 好像也没什么思维,就是一个水题,不过蛮有趣的.意思是找缺黑色最少的行列十字.用O(n)的空间预处理掉一维,然后用O ...

  5. TCL自动化之SSH交互式

    目前ssh工具很多,但是能够轻松运用到自动化脚本中,可以轻松适配任何环境,满足ssh交互式登录的tcl工具包很少 下面是个人在tcl自动化过程中比较满意的一款自动化脚本 通过使用管道方式分装plink ...

  6. Identity MVC：UI

    基于原来做的cookie认证的代码:MvcCookieAuthSample 增加登陆和退出的方法: 增加Login和SignIn这两个Action方法. 在Views下面创建Account文件夹,然后 ...

  7. Css中的!important

    转载自:https://www.cnblogs.com/cang12138/p/7326280.html !important为开发者提供了一个增加样式权重的方法,比直接在元素的 style 属性中设 ...

  8. 《TED演讲的秘密》：TED组织者总结的演讲技巧集锦。三星推荐。

    对演讲感兴趣的可以看看.对TED内容感兴趣的也可以翻翻,书中有不少作者认为演讲技巧比较经典(一般来说内容上也有特色)的TED演讲的二维码.三星推荐.http://t.cn/RvFStu7

  9. MongoDB 导入导出以及数据库备份

    -------------------MongoDB数据导入与导出------------------- 1.导出工具:mongoexport    1.1.概念:         mongoDB中的 ...

  10. C# 批量修改考勤设备时间

    自己工作中用到的小程序,每次远行后批量改一次 如下: 其中的zkemkeeper是中控的相关组件,因是系统组件,须要先注册相关文件后才有效 using System; using System.Col ...