文章导航

querySelectorAll() 方法

2018-11-11 15:20| 作者: admin| 查看: 1895| 评论: 0|来自: 蚂蚁部落

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

如果没有匹配到任何元素,返回null。此方法的工作原理与querySelector几乎完全一样。

区别是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.softwhy.com/" />
<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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/11/152129hzaj9z2m3hkhmtzp.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

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

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

(3).length属性返回集合中元素的数量,并将其写入div中。

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/11/152203ksse60rnee7ptwz7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/11/152232li1jk2oijivvoamz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

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

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

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

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

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部