JavaScript-DOM之 querySelect() 和 querySelectAll()方法简述

querySelect()

简单举个栗子：
1.获取文档中 id=“demo” 的元素：

document.querySelector("#demo");

2.获取文档中有 “target” 属性的第一个 元素：

document.querySelector("a[target]");

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

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

querySelectAll()

这个顾名思义，是筛选出所有符合条件的标签。生成一个 NodeList (节点列表) , 我们可以懒惰的通过下标进行访问。
这个方法接受包含一个css选择器的字符串参数，返回一个表示文档中匹配选择器的所有元素的NodeList对象。
栗子：

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

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

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

需要注意的是返回的nodeList集合中的元素是非实时（no-live）的，想要区别什么是实时非实时的返回结果，请看下例：

<div id="container">
    <div></div>
    <div></div>
</div>
//首先选取页面中id为container的元素
container=document.getElementById('#container');
console.log(container.childNodes.length)//结果为2
//然后通过代码为其添加一个子元素
container.appendChild(document.createElement('div'));
//这个元素不但添加到页面了，这里的变量container也自动更新了
console.log(container.childNodes.length)//结果为3
--------------------- 
原文：(https://blog.csdn.net/z742182637/article/details/51655690)

通过上面的例子就很好地理解了什么是会实时更新的元素。document.getElementById返回的便是实时结果，上面对其添加一个子元素后，再次获取所有子元素个数，已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点)。

感觉区别不大是吧，但如果是稍微复杂点的情况，原始的方法将变得非常麻烦，这时候 querySelector 和 querySelectorAll 的优势就发挥出来了。比如接下来这个例子，我们将在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素，当然这很拗口，但是用本文的新方法来选择这个元素，比用言语来描述它还要简单。

document.querySelector("div.test>p:first-child");
document.querySelectorAll("div.test>p:first-child")[0];

这是原生方法，比起jquery速度快。

但是注意：这两个方法都不支持伪类选择器。虽然现阶段几乎所有的浏览器都支持这两个方法，但是这些方法的规范并不要求支持css3选择器。

querySelectAll是终极的选取元素的方法，它是一种非常强大的技术，通过它JavaScript程序能够选择它们想要操作的元素。