想必小伙伴们对于 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. C#使用反射获取对象变化的情况

    记录日志时, 经常需要描述对象的状态发生了怎样的变化, 以前处理的非常简单粗暴: a. 重写class的ToString()方法, 将重要的属性都输出来 b. 记录日志时:  谁谁谁  由  变更前实 ...

  2. py文件的运行

    安装过程及配置 安装过程准备: 下载好Python的安装程序后,开始安装,在进入安装界面后一定确保勾选将Python加入到系统环境变量的路径里.如图所示: 2 如果没有选取,那么按照下面的步骤进行操作 ...

  3. ABB机器人设置安全区（案例版）

    ABB机器人设置安全区.中断(案例版) 1.概述 在如今机器人中普遍会设置机器人的安全区域,也可以理解为工作范围.主要目的是为了机器人运行时的安全性和可靠性.ABB机器人也不例外,下面我们就讲讲ABB ...

  4. ClassLoader的工作机制

    本文中主要介绍类加载器的工作机制 一:首先什么是类加载器? 类加载器就是用来加载java类到java虚拟机中.java源程序经过编译之后形成字节码文件,类加载器将字节码文件加载到内存中,并转换成jav ...

  5. linux学习第十六天 (Linux就该这么学)

    今生讲了邮件的产生和解决和实际问题,把前两天的和这节邮箱系统统一布置,又统一复习和学习了一下,

  6. 旅游类的APP原型模板分享——Priceline

    Priceline是一款旅游服务的APP应用.功能有查找预订酒店.车票.机票等服务. 本原型由国产Mockplus(原型工具)和iDoc(智能标注,一键切图工具)提供. 先简单看看动图: 点击这里,可 ...

  7. 列出cron的下几次运行时间

    static void Main(string[] args) { while(true) { var corn = Console.ReadLine(); var s=getCronSchdule( ...

  8. Sql 记录死锁

    记录死锁 DBCC errorlog DBCC TRACEON (1204, 1222, -1); DBCC tracestatus 关闭跟踪标记DBCC TRACEOFF

  9. RNQOJ 21 FBI数

    如果字符串全是0输出B,全是1输出I,01混合输出F,如果字符串分解到只剩下一个字符的时候我们可以很简单的判断出来是B串还是I串,如果处在父节点的位置,这里运用递归,通过子节点的返回值来判断子节点是混 ...

  10. css选择器的优先级算法

    1. 引言 浏览器CSS匹配顺序: 浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找. 比如#divBox p span.red{color:red;}, 浏览器的查找顺序如下: 先查找ht ...