JS：qurySelector和qurySelectorAll

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

本帖最后由马黑黑于 2022-3-27 22:18 编辑 <style type="text/css">
.codeBox { margin: auto; padding: 12px 10px; max-width: 760px; box-shadow: 1px 1px 2px #ccc; border-radius: 4px; background: rgba(0, 0, 0, .25); }
.codeBox pre { font: 14px Sans-serif; color: #8b4513; }
</style>

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.style.color = "red";
 
上栗中，我们查找到所有 class="book" 的元素，如果有（qb.length>0表示至少有一个），则将最后一个的前景色设置为红色。当然，我们还可以来个骚操作，把全部的元素文本设置为红色： 
if(qb.length>0) { 
   for(var key in qb){ 
      if(parseInt(key)<=qb.length) qb.style.color = "red"; 
   }
}
 
改变前景色语句 qb.style.color = "red" 执行之前我们用了一个条件语句，如果key的值小于等于qb数组长度，key还做了强制整数转换，这是为什么呢？for in 循环的循环变量 key 不是数值变量，是字符串变量，但在数组里，但key是以 0、1、2、3等看上去是数字的形式出现的，所以强制它为数值变量没啥问题，我们这么做主要是让key变量与qb数组长度作比较，防止对不存在的元素进行上色操作。 

<div class="codeBox">
<pre>
<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.style.color = "red";
   }
}
</script>
</pre>
</div>

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

以下是上述代码的运行情况： 
<div id="a" class="book">
This is div1 
<div id="b" class="book bag">Hi this is div2</div>
</div>
Hello this is P

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

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

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

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

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

红影发表于 2022-3-27 13:48

如果是document.querySelector(".book") 是不是第二个就不会上色了？

红影发表于 2022-3-27 13:49

不知道黑黑讲这个是准备派什么用途的{:4_204:}

马黑黑 发表于 2022-3-27 14:42

红影发表于 2022-3-27 13:48
如果是document.querySelector(".book") 是不是第二个就不会上色了？

是的，它只针对第一个

马黑黑 发表于 2022-3-27 14:43

红影发表于 2022-3-27 13:49
不知道黑黑讲这个是准备派什么用途的

已经用上了，彩色球的两个帖子，一个送给你的

红影发表于 2022-3-27 20:54

马黑黑发表于 2022-3-27 14:42
是的，它只针对第一个

哦哦，嗯，现在理解了。

红影发表于 2022-3-27 20:55

马黑黑发表于 2022-3-27 14:43
已经用上了，彩色球的两个帖子，一个送给你的

哦哦，原来是对那个帖子的进一步解说。我看到难的部分就自动跳过了，所以印象不深{:4_189:}

马黑黑 发表于 2022-3-27 22:17

红影发表于 2022-3-27 20:55
哦哦，原来是对那个帖子的进一步解说。我看到难的部分就自动跳过了，所以印象不深

获得web元素是基本功，JS控制它需要这个前提。实现方法不少，querySelector是方法之一

马黑黑 发表于 2022-3-27 22:18

红影发表于 2022-3-27 20:54
哦哦，嗯，现在理解了。

知识点太多太零散

红影发表于 2022-3-27 23:05

马黑黑发表于 2022-3-27 22:17
获得web元素是基本功，JS控制它需要这个前提。实现方法不少，querySelector是方法之一

嗯，获得元素，进行控制，然后在html里展现。

红影发表于 2022-3-27 23:06

马黑黑发表于 2022-3-27 22:18
知识点太多太零散

没事，一点点学习，最后融会贯通{:4_187:}

马黑黑 发表于 2022-3-27 23:35

红影发表于 2022-3-27 23:06
没事，一点点学习，最后融会贯通

应该是这样的

红影发表于 2022-3-28 11:16

马黑黑发表于 2022-3-27 23:35
应该是这样的

谢谢黑黑的耐心讲解。

马黑黑 发表于 2022-3-28 12:02

红影发表于 2022-3-28 11:16
谢谢黑黑的耐心讲解。

能理解就好

红影发表于 2022-3-28 16:26

马黑黑发表于 2022-3-28 12:02
能理解就好

跟着看的时候大都能理解，只是过后常常又迷糊了{:4_173:}

马黑黑 发表于 2022-3-28 18:05

红影发表于 2022-3-28 16:26
跟着看的时候大都能理解，只是过后常常又迷糊了

嗯，这个需要一个过程

红影发表于 2022-3-28 20:19

马黑黑发表于 2022-3-28 18:05
嗯，这个需要一个过程

希望能尽快熟悉起来。

马黑黑 发表于 2022-3-28 20:24

红影发表于 2022-3-28 20:19
希望能尽快熟悉起来。

会的

页: [1] 2 3 4 5

花潮论坛's Archiver

JS：qurySelector和qurySelectorAll