首页 > 代码库 > document.querySelector()和document.querySelectorAll()

document.querySelector()和document.querySelectorAll()

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

 

document.querySelector()和document.querySelectorAll()