querySelector 和 querySelectorAll 这两个方法呢 是JS中嫌原生获取节点函数太少 而 去引进的
用法都是接受一个字符串
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;
//很多很多 自己实践
作者：咸瑜
