document.getElementById 和 document.getElementsByClassName获取DOM元素的区别
想必小伙伴们对于 JS 获取DOM的几种方法早已烂熟于心，了然于胸，
尤其是 document.getElementById 和 document.getElementsByClassName，
看看下面截图，用上面2种方法获取到元素并添加点击事件后，控制台会打印出什么呢？
可能有小伙伴晃眼一看，这么简单，不就是 1和2 吗，真的是这样吗？下面看看控制台的打印截图
结果是只打出了1，为什么没有打印出2呢？
现在我们把2种获取DOM的方法打印出来，如下截图，
console.log(test_id); console.log(test_class);
结论：
①：前者获取的是指定的具有唯一性的一个元素，后者获取的是一个集合，
②：document.getElementsByClassName不能直接给一个集合添加事件，
要用数组索引的方式，test_class[0].onclick = function(){}
③：document.getElementsByClassName获取第一个元素就是test_class[0]，第二元素test_class[1]，以此类推
测试demo
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title> </head> <body>
<button id="Test">我是id</button>
<button class="test">我是class</button>
<button class="test">我也是class</button> <script>
var test_id = document.getElementById("Test");
var test_class = document.getElementsByClassName("test"); test_id.onclick = function() {
console.log(1);
} test_class[0].onclick = function() {
console.log(2);
} test_class[1].onclick = function() {
console.log(3);
} console.log(test_id);
console.log(test_class);
</script>
</body> </html>
写这篇博客的初衷说来惭愧，因为习惯了用id获取元素，所以当用class获取元素时，总会忘记获取的是一个集合，
这也说明我基础还是不牢固，以此警示自己，希望自己不要好高骛远，打好基础
document.getElementById 和 document.getElementsByClassName获取DOM元素的区别的更多相关文章
- 通过class和id获取DOM元素的区别
1.通过id获取DOM元素的方法:document.getElementById("id名") 2.通过class获取DOM元素的方法:document.getElementsBy ...
- JS1 js获取dom元素方法
js获取dom元素方法 1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId") 其 ...
- JS获取DOM元素的八种方法
JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...
- 获取DOM元素位置和尺寸大小
JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...
- javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- js | javascript中获取dom元素的高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...
- 第六章 组件 67 使用ref获取DOM元素和组件引用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- Vue系列之 => ref获取DOM元素和组件
可以获取DOM元素,和组件中的数据,方法 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
随机推荐
- CentOS7 修改静态IP地址
Ip配置文件在/etc/sysconfig/network-scripts文件夹下,查找该文件的方法为: [root@localhost ~]# ll /etc/sysconfig/network-s ...
- Quartz.Net进阶之五：TriggerListener 、JobListener 和 SchedulerListener
一.介绍 今天开始学习监听器,就是 Listener,在Quartz.Net 中,主要包含3类的监听器,主要内容包括:TriggerListener .JobListener 和 SchedulerL ...
- 谈谈逆向android里面的so
1. 加密sgf算法分析 2.gnugo瘦身记
- js处理日期
/Date(-62135596800000)/ 如何用js转化为日期时间格式 2015-11-20 14:33:20像这样 var a = '/Date(-62135596800000)/' Date ...
- How to Reset VW Steering Assist 1S1909144P with OBDSTAR X300 DP
Vehicle model:VW Polo 2015 (or other Audi, Seat, Skoda, VW with unit 1S1 909 144 P) Module:Control u ...
- Autel MaxiTPMS TS601 Wireless TPMS Sensor Reset Relearn Activate Programming Tool
Why Choose Autel TPMS TS601? MaxiTPMS TS601 is a TPMS tool with highest performance in the world. It ...
- 一年web网站测试总结
1. 页面链接检查 每一个链接是否都有对应的页面,并且页面之间切换正确.可以使用一些工具,如LinkBotPro.File-AIDCS.HTML Link Validater.Xenu等工具.Link ...
- linux '--stdin'错误 -批量修改密码
虚拟机:VMware虚拟机 系统:Linux ubuntu 4.4.0-31-generic #50~14.04.1-Ubuntu SMP Wed Jul 13 01:07:32 UTC 2016 ...
- linux下安装srilm
1.安装相关依赖库 a.c/c++ compiler:编译器gcc 3.4.3及以上版本 b.GNU make:构建和管理工程的工具,解释Makefile里的指令,描述了整个工程所有文件的编译顺序 ...
- chrome gps位置模拟设置
chrome gps位置模拟设置 调试公众号页面定位,Edge 虽好实现方便,介于界面实在不符合我的调试习惯 遂上度娘寻觅chrome模拟GPS方法 找了好几个帖子,发现新版本已经不再试用.不得感叹 ...