getElementsByClassName 和querySelector简单区别

最新推荐文章于 2025-02-24 23:03:33 发布

柚柚柚子&

最新推荐文章于 2025-02-24 23:03:33 发布

阅读量1.5k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/m0_45480496/article/details/113748451

版权

javascript dom操作

前端专栏收录该内容

2 篇文章

订阅专栏

getElementsByClassName 和querySelector简单区别

getElementsByClassName：

（1）返回一个包含了所有指定类名的子元素的类数组对象，返回对象是动态的NodeList。
（2）getElementsByClassName()是HTML5 新增的DOM API（IE8以下不支持）
(3) 对于现代浏览器开发，还可以使用querySelector()和querySelectorAll()。他们的功能更加强大。

getElementsByClassName()是HTML5的DOM API。
document.getElementsByClassName("box"); //取得DOM中所有class = "box"的元素

querySelectorAll：

1)返回与指定的选择器组匹配的文档中的元素列表，返回对象是静态的NodeList。
2)querySelector()和querySelectorAll()是新标准的Selectors
API(选择符API)。IE8+、FF3.5+、Safari 3.1+、Chrome、Opera 10+支持。
3)querySelector()接受一个css选择器作为参数,然后返回DOM中匹配的第一个元素
4) querySelectorAll()接受一个css选择器作为参数,然后返回DOM中匹配的元素的集合数组

document.querySelector("#box") // 取得DOM中第一个id= “box”的元素
document.querySelector(".box") // 取得DOM中第一个class= “box”的元素

练习时碰到的问题（正确写法）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* display: block; */
        }
        
        .box img {
            width: 60px;
            margin-top: 5px;
        }
        
        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        淘宝二维码
        <img src="images/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        // 1. 获取元素 
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        //下面是错误的写法
        //var btn=document.getElementsByClassName('close-btn');
        //var box=document.getElementsByClassName('box');
        // 2.注册事件 程序处理
        btn.onclick = function() {
            box.style.display = 'none';
        }
    </script>
</body>
</html>

测试错在哪
在这里插入图片描述
测试代码后台打印可以看出此例子不能使用getElementsByClassName（）