想必小伙伴们对于 JS 获取DOM的几种方法早已烂熟于心,了然于胸,

   尤其是 document.getElementByIddocument.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

  

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  7. <title></title>
  8.  
  9. </head>
  10.  
  11. <body>
  12. <button id="Test">我是id</button>
  13. <button class="test">我是class</button>
  14. <button class="test">我也是class</button>
  15.  
  16. <script>
  17. var test_id = document.getElementById("Test");
  18. var test_class = document.getElementsByClassName("test");
  19.  
  20. test_id.onclick = function() {
  21. console.log(1);
  22. }
  23.  
  24. test_class[0].onclick = function() {
  25. console.log(2);
  26. }
  27.  
  28. test_class[1].onclick = function() {
  29. console.log(3);
  30. }
  31.  
  32. console.log(test_id);
  33. console.log(test_class);
  34. </script>
  35. </body>
  36.  
  37. </html>

  写这篇博客的初衷说来惭愧,因为习惯了用id获取元素,所以当用class获取元素时,总会忘记获取的是一个集合,

  这也说明我基础还是不牢固,以此警示自己,希望自己不要好高骛远,打好基础

document.getElementById 和 document.getElementsByClassName获取DOM元素的区别的更多相关文章

  1. 通过class和id获取DOM元素的区别

    1.通过id获取DOM元素的方法:document.getElementById("id名") 2.通过class获取DOM元素的方法:document.getElementsBy ...

  2. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  3. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  4. 获取DOM元素位置和尺寸大小

    JavaScript获取DOM元素位置和尺寸大小 在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这种时候我们经常会用到一些元素位置和尺寸的计算,浏览器兼容性问题也是不可忽 ...

  5. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  6. javascript中获取dom元素高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  7. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  8. 第六章 组件 67 使用ref获取DOM元素和组件引用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. Vue系列之 => ref获取DOM元素和组件

    可以获取DOM元素,和组件中的数据,方法 <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

随机推荐

  1. ThinkPHP5 与ThinkPHP3.2公共函数放置位置

    最初使用ThinkPHP3..3的时候,我们自己定义的公共函数常常放置于 \Common\function.php 由于最近准备重新捡起微信开发,准备用ThinkPHP5进行微信公众号开发,使用到公共 ...

  2. bootstrap treeview 树形数据生成

    这个问题还是挺经典的,后台只是负责查出所有的数据,前台js来处理数据展示给treeview;show you the code below:<script> $(function () { ...

  3. 将EditPad Lite 加入鼠标右键

    > 开始 > regedit 如图新建shell及command

  4. 【aardio】]SQL创建、读写 excel

    import access; var db,err = access( "/test.xls" ) //文件不存在可自动创建 //创建表 if( ! db.existsTable( ...

  5. 【aardio】回车换行符

    回车换行符 在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 33)的玩意,每秒钟可以打10个字符.但是它有一个问题,就是打完一行换行的时候,要用去0.2秒,正好可以打两个字 ...

  6. vue+elementUI表格列显示隐藏遇到bug

    在最近的项目中,有需求要做到根据字段显示列,原来以为简单的v-if可以解决. 在开发的过程中遇到问题, <el-table ref="multipleTable" :data ...

  7. hid.dll

    hid.dll是USB的HID相关动态链接库文件,缺少它可能会造成usb设备无法正常使用.当你的电脑弹出提示“计算机缺少hid.dll”或“无法找到hid.dll Hkapi.dll HKComman ...

  8. Linux 平台 tcpdump 抓包

    一. 在ecs上准备好mysql客户端命令 二. 开启抓包,抓包方法如下:Linux 平台: 1. 打开一个到ECS的ssh连接,并以root身份登录.在该窗口运行下列命令tcpdump -i any ...

  9. asp:DropDownList 使用

    <asp:DropDownList ID="DropDownList1" runat="server" onchange="return My_ ...

  10. mysql 的 alter table 操作性能小提示

    通常情况下,修改表的结构一般不会有太大问题,无非就是一个 alter table 操作,但是对于大表做 alter 操作是一个大问题,请小伙伴们慎重. mysql执行大部分修改表结构操作方法是创建一个 ...