HTML5向Web API新引入了 document.querySelector()和document.querySelectorAll()两个方法，都可以接收三种类型的参数：id(#)，class(,)，标签，就像jquery选择器，参数需要是合法的CSS选择语法。
用起来更方便的从DOM中选取元素，功能类似于jquery的选择器，这样在写原生js代码的时候就方便了许多。
document.querySelector()
返回文档中匹配指定的选择器组的第一个元素(使用深度优先先序遍历文档的节点 | 并且通过文档标记中的第一个元素，并按照子节点数量的顺序迭代顺序节点)。
语法：
element = document.querySelector(selectors);
其中：
1，element是一个element对象（DOM元素）。
2. selectors是一个字符串，包含一个或多个CSS选择器，多个则以逗号分割。
例子：这个例子中，会返回当前文档中第一个类名为‘myclass’的元素：
var el = document.querySelector(".myclass");
Document.querySelectorAll()
返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。
语法：
elementList = document.querySelectorAll(selectors);
其中：
1， elementList是一个non-live的NodeList类型的对象；
2，selectors是由一个逗号连接的包含一个或多个CSS选择器的字符串。
如果 selectors参数中包含 CSS伪元素，则返回一个空的elementList。
例子：
下面的例子返回一个文档中所有的class为"note"或者 "alert"的div元素.
var matches = document.querySelectorAll("div.note, div.alert");
来源：https://www.cnblogs.com/zhongjiang/p/6651352.html