querySelector() 方法返回匹配指定选择器的第一个元素。如果没有找到，则返回 null。

语法格式：

element.querySelector(CSS 选择器)；

如果使用多个选择器，选择器之间使用逗号隔开。

示例：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="list">
        <li>列表项1</li>
        <li class="list-item2">列表项2</li>
        <li id="list-item3">列表项3</li>
        <li>列表项4</li>
        <li>列表项5</li>
    </ul>
    <script>
        //获取类名称为list的第一个元素
        var list = document.querySelector('.list');
        //获取文档中的第一个li元素
        var lis = document.querySelector('li');
        //获取类名称为list-item2的第一个元素
        var item2 = document.querySelector('.list-item2');
        var item2_ = document.querySelector('.list').querySelector('.list-item2');
        //获取ID名称为list-item3的第一个元素
        var item3 = document.querySelector('#list-item3');
        console.log(list);
        console.log(lis);
        console.log(item2);
        console.log(item2_);
        console.log(item3);
    </script>
</body>

</html>

控制台输出：

Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

avatar 华为云开发者联盟
cover

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

avatar 华为云开发者联盟
cover

如何使用Python和Plotly绘制3D图形

avatar 华为云开发者联盟