想必小伙伴们对于 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元素的区别的更多相关文章

  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. checkinstall

    一.简介 Linux 的源码安装工具 CheckInstall

  2. 基于SoftRoCE 了解RDMA

    RDMA是基于IB技术的内存直接传送,无需内核参与,硬件网卡搞定.IB需要HPC领域的专用硬件,ROCE则是RDMA协议在普通以太网卡的实现,RoCEv1是在MAC上的二层封装,局域网内可以,要通过路 ...

  3. 在Linux系统上安装Compose

    在Linux上,您可以从GitHub上的Compose存储库发行页面下载Docker Compose二进制文件.按照链接中的说明进行操作,该链接涉及curl在终端中运行命令以下载二进制文件.这些分步说 ...

  4. 《Oracle查询优化改写技巧与案例》学习笔记-------使用数字篇

    一个系列的读书笔记,读的书是有教无类和落落两位老师编写的<Oracle查询优化改写技巧与案例>. 用这个系列的读书笔记来督促自己学习Oracle,同时,对于其中一些内容,希望大家看到以后, ...

  5. 自己搭建git服务器

    1.安装git 2.创建git用户,给权限(git目录下) 3.设置公钥 4.初始化git仓库 5.给权限(仓库) 连接到本地

  6. core的微服务相关

    网关是ocelot consul 服务发现 配置中心apollo

  7. js跳转到页面指定元素

    var scrollDistance = $("#设置了的overflow元素").scrollTop() + $('#' + 当前屏幕元素).offset().top; $(&q ...

  8. Robot Framework+python的安装，配置，环境搭建（纯白篇）

    弄了大半天 终于把-Robot Framework-弄好了,总是一个发现问题,一个一个去解决的过程,只是时间嘛,咳咳咳咳 言归正传 第一. 记住了 Robot Framework 的库 只支持 pyt ...

  9. jquery选择器基础知识（复制w3c）

    jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...

  10. idea快捷键（后续更新）

    自动补全当前行的标点符号 ctrl + shirt + 回车 跳到下一行 shirt +回车 复制一行 crtl + d 删除一行 ctrl + y 提示报错 alt + 回车 查看当前可以产什么参数 ...