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

华为云数据仓库专业级开发者认证重磅发布

avatar 华为开发者空间
cover

KubeEdge 新版本5大特性解读：更完备的节点设备能力，全新的Dashboard体验

avatar 华为开发者空间
cover

一文带你搞懂GaussDB数据库性能调优

avatar 华为开发者空间