为queryselectorjQuery选择器的使用指南

简介

HTML5引入了document.queryselector和document.queryselectorall Web API的两种方式，这是从DOM和功能如jQuery选择器选择元素更方便。这使得它更容易编写原生Javaｓｃｒｉｐｔ代码。

使用

使用相同语法的两种方法是接收字符串参数，该字符串参数必须是合法的CSS选择语法。

复制代码代码如下所示：

元= document.queryselector（'selectors）；

elementlist = document.queryselectorall（'selectors）；

参数选择器可以包含多个CSS选择器，它们由逗号分隔。

复制代码代码如下所示：

元= document.queryselector（'selector1，selector2，…）；

elementlist = document.queryselectorall（'selector1，selector2，…）；

用这两种方法都找不到一个伪类元素，如queryselector（悬停），不会得到预期的结果。

queryselector

复制代码代码如下所示：

元= document.queryselector（'div #容器）； / /第一个div容器返回的ID

元= document.queryselector（'。foo，。酒吧'）； / /第一返回元件与一个foo或酒吧风格类。

querySelectorAll

此方法返回的所有元素，满足该条件，其结果是一个列表，找到规则如前所述。

元素= document.queryselectorall（'div.foo '）； / /返回所有foo div风格

需要注意的是，在返回的列表集合中的元素都是非实时的重要。