JS：qurySelector和qurySelectorAll

马黑黑 · 发表于 2022-3-27 11:37

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-3-27 22:18 编辑

qurrySelector()是基于HTML5新增的DOM(document)方法，用于查找HTML元素，较之于 getElementByXxx() 方法集合更为简洁、直接、高效。其中，query是查询之意，Selector是选择器的意思，合起来意为查找、查询特定CSS选择器的HTML元素。现代所有浏览器都支持该方法。

如上已述，querySelector()可以获取基于CSS选择器的HTML元素，意思是只要元素具备id、class之类的属性，该方法就可以找到并获得操作句柄。例如：

var ele = document.querySelector("#myBox"); //获得 id="myBox" 的元素句柄
var ec = document.querySelector(".myDiv"); //获得 class="myDiv" 的元素句柄

值得注意的是，当要获取的对象元素是类选择器，querySelector()方法得到的是web document文档流中此类元素第一个出现的元素，它不管后面的其他同类元素。所以，JS还提供另一个方法，querySelectorAll()，它可以操纵document中所有的相同类名的选择器。举个热乎乎的栗子：

var qb = document.querySelectorAll(".book");
if(qb.length>0) qb[qb.length-1].style.color = "red";

上栗中，我们查找到所有 class="book" 的元素，如果有（qb.length>0表示至少有一个），则将最后一个的前景色设置为红色。当然，我们还可以来个骚操作，把全部的元素文本设置为红色：

if(qb.length>0) {
for(var key in qb){
if(parseInt(key)<=qb.length) qb[key].style.color = "red";
} }

改变前景色语句 qb[key].style.color = "red" 执行之前我们用了一个条件语句，如果key的值小于等于qb数组长度，key还做了强制整数转换，这是为什么呢？for in 循环的循环变量 key 不是数值变量，是字符串变量，但在数组里，但key是以 0、1、2、3等看上去是数字的形式出现的，所以强制它为数值变量没啥问题，我们这么做主要是让key变量与qb数组长度作比较，防止对不存在的元素进行上色操作。

<div id="a" class="book">
   This is div1<br>
   <div id="b" class="book bag">Hi this is div2</div>
</div>
<p id="c" class="book">Hello this is P</p>

<script>
var qb = document.querySelectorAll(".book");
if(qb.length>0) {
   for(var key in qb){
      if(parseInt(key)<=qb.length) qb[key].style.color = "red";
   }
}
</script>

马黑黑 · 发表于 2022-3-27 11:42

以下是上述代码的运行情况：

This is div1

Hi this is div2

Hello this is P

马黑黑 · 发表于 2022-3-27 11:43

本帖最后由马黑黑于 2022-3-27 11:44 编辑

二楼效果中，我们没有用CSS定义各元素的前景色，HTML代码也没有指定文本颜色：

<div id="a" class="book">
This is div1<br>
<div id="b" class="book bag">Hi this is div2</div>
</div>
<p id="c" class="book">Hello this is P</p>