document.querySelector()和document.querySelectorAll()

Posted 2020-09-07 zhangzhongjiang

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");