想必小伙伴们对于 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. java之数据库相关

    这篇还是在回顾知识.主要是关于java连接Sqlserver2012数据库的一些方式记录,以便以后查询. 十一之内复习完这些知识就可以新学Hibernate啦(*^▽^*) 1.普通方式 注意,在连接 ...

  2. pip install rrdtool

    fatal error: rrd.h: No such file or directory apt-get install librrd-dev

  3. 图解Go select语句原理

    Go 的select语句是一种仅能用于channl发送和接收消息的专用语句,此语句运行期间是阻塞的:当select中没有case语句的时候,会阻塞当前的groutine.所以,有人也会说select是 ...

  4. LNMP php缓存器下载

    一.LNMP php缓存器下载(1)配置环境变量 LC_ALLecho ‘export LC_ALL=C'>> /etc/profilesource /etc/profile 生效命令 ( ...

  5. Idea增加Idiff merger工具

    File -- setting --- tolls -- diff & merge 选择使用外部diff工具和外部merge工具,选择winmerge工具目录. 就可以再version con ...

  6. 如何为shell安装有道及更新pip.

    今天尝试安装shell下的有道翻译,提示需要安装pip. [root@mestery ~]# yum install python-pip [root@mestery ~]# sudo pip ins ...

  7. NOIP考点

    NOIP考点 基础算法 图 树 数论 数据结构 动态规划 搜索 其他算法 省选知识点汇总 图论 数据结构 字符串相关算法及数据结构 数学 计算几何 搜索 动态规划 其他算法 转自:巨佬的博客 加*号是 ...

  8. flag:用心学习的第一天

    目标是:加油学习,尽早改变世界

  9. Java实现图片的裁剪(包括透明背景)

    需求: 有一张位置大小的图片,现在需要根据这张原图得到指定尺寸的图片,且得到的图片要符合原先图片的比例,就是在原图的基础上等比例缩放得到图片后,在进行剪裁,这样保证得到的图片是原图的一部分,而不是将原 ...

  10. 虚拟机安装+配置federa

    安装 安装好后发现鼠标卡卡的,在虚拟机的显示设置里面启用3D加速: 配置 查看 显卡信息:lspci |grep VGA 测试显卡驱动:glxgears 安装必要软件 安装右键打开终端:sudo yu ...