querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

但是！

querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

语法

document.querySelector(CSS selectors)

参数	类型	描述
CSS 选择器	String	必须。指定一个或多个匹配元素的 CSS 选择器。可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。对于多个选择器，使用逗号隔开，返回一个匹配的元素。

还蛮强大啊你看除了CSS选择器来找还可以用它们的 id, 类, 类型, 属性, 属性值等来选取元素：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BiHu Study JS</title>
    <style type="text/css">
    #student_id{
        color: red;
    }
    #study_id{
        color: green;
    }

    </style>
</head>
<body>
        <div id = "div_id">
            <p id = "student_id" class = "student_class"> 永远的学生 </p>
            <p id = "study_id" class = "study_class"> 好好学习 </p>
            <p id = "class_id" class = "class_class"> CLASS 是 class_class </p>
        </div>
</body>
<script type="text/javascript">
    /*要注意啊！
    *  获取 id 要加 '#'     获取class 要加 '.'    注意 ！！！
    *   自己在下面用注释一个个测试即可 无聊死了....
    * */
    var x1 = document.querySelector('p').innerHTML = "永远的学生 被我改啦！啊哈哈";  //获取到第一个标签名为p的标签节点并改内容
    var x2 = document.querySelector('#study_id').innerHTML = "好好学习  被我改啦！啊哈哈"; //获取到第一个id为study_id的标签节点并改内容
    var x3 = document.querySelector('.class_class').innerHTML = "class  被我改啦！啊哈哈"; //获取到第一个class为class_class的标签节点并改内容
    var x4 = document.querySelector('div p').innerHTML = "无聊死了..div 下的 第一个 p标签..."; //获取到第一个div下的p标签节点并改内容
    var x5 = document.querySelector('#div_id p').innerHTML = "无聊死了..id为div_id 下的 第一个 p标签..."; //获取到id为div_id第一个p标签节点并改内容
    /*不写了啊 主要还是你id的话加#号  class 你加.号    和 css选择器的一样格式的啊！ 但返回的都是第一个*/
</script>
</html>

返回值:	匹配指定 CSS 选择器的第一个元素。如果没有找到，返回 null。如果指定了非法选择器则抛出 SYNTAX_ERR 异常。

querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。

NodeList 对象表示节点的集合。可以通过索引访问，索引值从 0 开始。

你可以使用 NodeList 对象的 length 属性来获取匹配选择器的元素属性，然后你可以遍历所有元素，从而获取你想要的信息。

语法

elementList = document.querySelectorAll(selectors);

elementList 是一个静态的 NodeList 类型的对象。
selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串

属性值

参数	类型	描述
CSS 选择器	String	必须。指定一个或多个匹配 CSS 选择器的元素。可以通过 id, class, 类型, 属性, 属性值等作为选择器来获取元素。多个选择器使用逗号(,)分隔。

返回值:	一个 NodeList 对象，表示文档中匹配指定 CSS 选择器的所有元素。 NodeList 是一个静态的 NodeList 类型的对象。如果指定的选择器不合法，则抛出一个 SYNTAX_ERR 异常。

// 获取文档中所有的 <p> 元素
var x = document.querySelectorAll("p"); 
 
// 设置第一个 <p> 元素的背景颜色
x[0].style.backgroundColor = "red";

// 获取文档中所有 class="example" 的 <p> 元素
var x = document.querySelectorAll("p.example");

// 设置 class="example" 的第一个 <p> 元素的背景颜色 
x[0].style.backgroundColor = "red";

//计算文档中 class="example" 的 <p> 元素的数量（使用 NodeList 对象的 length 属性）:

var x = document.querySelectorAll(".example").length;

//很多很多自己实践

本文来自博客园，作者：咸瑜，转载请注明原文链接：https://www.cnblogs.com/bi-hu/p/14779707.html