querySelectorAll() 方法

小灰灰 2020-06-02 14:00 1036阅读 0赞

# querySelectorAll() 方法

querySelectorAll方法可以获取与指定选择器匹配的所有元素的集合。

如果没有匹配到任何元素，返回null。

区别是querySelector获取选择器匹配的第一个元素，而querySelectorAll获取所有元素。

本文着重介绍一下方法核心内容和一些注意点。

语法结构：

```javascript
dom.querySelectorAll(selector)
```

参数解析：

（1）.selector：必需，是用来进行匹配的CSS选择器。

特别说明：

（1）.如果要使用多个选择器，使用逗号分隔。

（2）.如果选择器中存在伪元素选择器，那么返回一个空集合，谷歌浏览器当前（也许以后会此问题，所以涉及到此问题，以实测为准）存在一个小bug，在其返回的集合中存在一个HMTL元素。

**浏览器支持:**

（1）.IE8+浏览器支持此方法。

（2）.edge浏览器支持此方法。

（3）.谷歌浏览器支持此方法。

（4）.opera浏览器支持此方法。

（5）.火狐浏览器支持此方法。

（6）.safria浏览器支持此方法。

**代码实例：**

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css"> 
ul,li { 
  list-style:none; 
} 
</style> 
<script> 
window.onload=function() { 
  let odiv=document.querySelector("#show");
  let li=document.querySelector(".a");
  odiv.innerHTML=li.length; 
} 
</script> 
</head> 
<body> 
<div id="show"></div>
<ul id="box">
  <li>蒲公英云一</li>
  <li class="a">蒲公英云二</li>
  <li class="a">蒲公英云三</li>
  <li>蒲公英云四</li>
  <li>蒲公英云五</li>
</ul>
</body> 
</html>
```

代码分析如下：

（1）.此方法会获取所有class属性值为"a"的元素。

（2）.方法的返回值是一个元素集合。

（3）.length属性返回集合中元素的数量，并将其写入div中。

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css"> 
ul,li { 
  list-style:none; 
} 
</style> 
<script> 
window.onload=function() { 
  let odiv=document.querySelector("#show");
  let lis=document.querySelectorAll(".a,.b");
  odiv.innerHTML=lis.length; 
} 
</script> 
</head> 
<body>
  <div id="show"></div>
  <ul id="box">
    <li>蒲公英云一</li>
    <li class="a">蒲公英云二</li>
    <li class="a">蒲公英云三</li>
    <li class="b">蒲公英云四</li>
    <li>蒲公英云五</li>
  </ul>
</body> 
</html>
```

如果参数是多个选择器，那么使用逗号分隔。

上述代码能够获取class属性值为"a"和"b"的元素集合。

```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<script> 
window.onload=function() { 
  let oshow=document.querySelector(".show");
  let oant=document.querySelector(".ant");
  let odiv=oant.querySelectorAll(".wrap div");
  oshow.innerHTML=odiv.length;
} 
</script> 
</head> 
<body> 
<div class="show"></div>
<div class="wrap">
  <div class="ant">
    <div class="a"></div>
    <div class="a"></div>
  </div>
  <div class="b"></div>
</div>
</body> 
</html>
```

代码运行效果截图如下：
![](/images/1591106401135.png)

querySelectorAll也可以使用其他dom元素调用，不必须是document对象。

很多朋友可能对打印结果有些疑问，误以为是0，因为他们认为oant坚定了检索范围。

不能说上述理解完全错误，但是并不全面，分析如下：

（1）.选择器匹配范围不受方法调用元素的限定，所以".wrap div"匹配class属性值为"a"和"b"的三个元素。

（2）.但是匹配到的元素会受到调用元素的限定，所以只有class属性值为"a"的两个元素满足条件。