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 ...
随机推荐
- 1.为什么使用spring boot
最近2年spring cloud微服务比较流行,Spring Cloud基于SpringBoot,为微服务体系开发中的架构问题提供了一整套的解决方案, 本文总结一下为什么要使用Spring boot, ...
- mysql 函数介绍
含义 一组预先编译好的SQL语句集合,可以理解成批处理语句 提高代码的重用性 简化操作 减少了编译次数并且减少了和数据库服务器的连接次数, 提高了效率 区别 : 存储过程:可以有0个返回,也可以有多个 ...
- 密码与安全新技术专题之WEB应用安全
学号 2018-2019-2 <密码与安全新技术专题>第1周作业 课程:<密码与安全新技术专题> 班级: 1892 姓名: 李熹桥 学号:20189214 上课教师:谢四江 上 ...
- nodeJS接入微信公众平台开发
一.写在前面的话 Node.js是一个开放源代码.跨平台的JavaScript语言运行环境,采用Google开发的V8运行代码,使用事件驱动.非阻塞和异步输入输出模型等技术来提高性能,可优化应用程 ...
- JAVA实现等腰三角形
class Triangle { public static void main(String[] args) { for(int a=0; b<5; a++)//这个代表只有四行 { for( ...
- Shell脚本备份数据库(多库)
#!/bin/bashPATH=/bin:/sbin:/usr/bin:/usr/sbin:/usr/local/bin:/usr/local/sbinexport PATH#数据库用户名dbuser ...
- clouderamanager安装
下载地址 http://archive.cloudera.com/cm5/cm/5/ 安装 先安装manager,再安装cdh 待续
- 移动 web 适配
一.移动 web 开发与适配 1.跑在手机端的 web 页面(H5 页面) 2.跨平台(PC 端.手机端 - 安卓.IOS) 3.基于 webview(终端开发技术的一个组件) 4.告别 IE 拥抱 ...
- duilib窗口从任务栏恢复问题
关闭.最大最小化和恢复等消息由WM_SYSCOMMAND和OnSysCommand()进行处理,需要在HandleMessage()中添加处理.
- WindowsPE权威指南 第二章 小工具 pedump代码的C语言实现
2016-11-16 16:29:07 主程序代码 pedump.c #include <windows.h> #include <Richedit.h> #include & ...