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 ...
随机推荐
- filter 全局和局部过滤器
1,局部过滤器 2,全局过滤器 使用方法相同,在花括号中使用过滤器名或者v-bind中使用
- SHELL脚本学习-自动生成AWR报告
自动生成AWR报告,每个小时生成一次. #编辑脚本:vim awr_auto.sh #oracle用户下执行 #!/bin/bash # 每个小时执行一次,自动生成AWR报告 source ~/.ba ...
- 单点登录的三种实现方式 转自： https://blog.csdn.net/python_tty/article/details/53113612
单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任.单点登录在大型网站里使用得 ...
- Scrum冲刺阶段5
成员今日完成的任务 人员 任务 何承华 学习后端设计 陈宇 后端设计 丁培辉 学习后端设计 温志铭 日程添加界面设计(后半段设计) 杨宇潇 日程添加界面设计(后半段设计) 张主强 服务器构建学习 成员 ...
- django中views中方法的request参数
知其然亦要知其所以然 views每个方法的参数都是request,那么问题来了,request为何物? 首先,几乎每个方法都是取数据(无论是从数据库,还是从第三方接口),然后进行一定的处理,之后传给前 ...
- 《Linux就该这么学》第十六天课程
今天笔记有点少就不发了,分享一下第23章 使用OpenLDAP部署目录服务很实用 下面是DHCP动态管理地址,如需深入学习请前往 https://www.linuxprobe.com/chapter- ...
- 移动端canvas文字图片合成并生成图片（canvas宽度自适应移动端屏幕）
这是我之前做的一个关于文字图片合成的代码,供大家参考,不足支出还望体谅:具体的注释在代码里都有,有什么不懂了可以留言互相交流.<!DOCTYPE html> <html lang=& ...
- 【翻译】Flume 1.8.0 User Guide(用户指南) source
翻译自官网flume1.8用户指南,原文地址:Flume 1.8.0 User Guide 篇幅限制,分为以下5篇: [翻译]Flume 1.8.0 User Guide(用户指南) [翻译]Flum ...
- ceph删除pool提示（you must first set the mon_allow_pool_delete config option to true）解决办法
现象: 1.在mon节点打开/etc/ceph/ceph.conf,增加以下 2.重启ceph-mon systemctl restart ceph-mon.target 3.删除pool [root ...
- PHP中this,self,parent的区别
{一}PHP中this,self,parent的区别之一this篇 面向对象编程(OOP,Object OrientedProgramming)现已经成为编程人员的一项基本技能.利用OOP的思想进行P ...