想必小伙伴们对于 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. django2.0解决跨域问题

    跨域问题一:(cors跨域问题) 解决方法: 1.安装 django-cors-headers 2.修改 setting.py INSTALLED_APPS = [ ... 'corsheaders' ...

  2. struts1.x 核心控制器 和 用户自定义控制器扩展类;

    ServletAction继承于HttpServlet,是struts1.x中和核心控制器. 配置于web.xml文件中,指定config属性,该config属性用于指定formBean和action ...

  3. tomcat修改banner，隐藏版本号

    为了避免黑客针对某些版本进行攻击,因此我们需要隐藏或者伪装 Tomcat 的版本信息.针对该信息的显示是由一个jar包控制的,该jar包存放在 Tomcat 安装目录下的lib目录下,名称为 cata ...

  4. sql_calc_found_rows原理

  5. C# byte[]数组和string的互相转化 (四种方法)

    C# byte[]数组和string的互相转化 (四种方法) 第一种 [csharp] view plain copy string str = System.Text.Encoding.UTF8.G ...

  6. 字典 Dictionary

    字典 Dictionary {Key-Value} 1.字典是无序的,没有下标(因为有key,取值直接用key值) Key尽量不要用中文编写,以防止编码不同导致取不出来 2.字典常用方法: 查找: ① ...

  7. RAM和ROM

    RAM:随机存取存储器(英语:Random Access Memory,缩写:RAM),也叫主存,是与CPU直接交换数据的内部存储器.[1]它可以随时读写(刷新时除外,见下文),而且速度很快,通常作为 ...

  8. SEO常用命令大全

    SEO常用单个命令如下: link: 指某个特定网站的外部链接,这是一个主要获取排名和权重的主要因素. site: 呵呵,这个是经常用到的了,它是指某个特定网站收录情况. 用法:site: www.  ...

  9. 用Python对html进行编码

    原地址:https://stackoverflow.com/questions/275174/how-do-i-perform-html-decoding-encoding-using-python- ...

  10. web测试和app测试的区别

    功能上: 功能上没有什么区别,都是用同样的方法来写用例(等效.边界值...) 架构上: web是B/S架构(浏览器和服务器)代码更新后数据会同步,可以保证所有客户一致 app是C/S架构(客户端和服务 ...