querySelectorAll应用举例

马黑黑 · 发表于 2023-2-12 13:26

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

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

x

querySelectorAll是JS基于DOM查询的函数，查询HTML文档的所有指定元素。语法为：

element.querySelectorAll(selectors);

其中：① element 是查询的发起元素，比如 document（文档）、某一个div（元素）；② 参数 selectors 指要查询的选择器关键字，它用了复数形式，与 All 相对应。例如，我们要查询HTML文档的所有 <span></span> 标签，并将结果存储在变量 spanAr 中：

let spanAr = document.querySelectorAll('span');

这将得到一个包含了所有 span 标签的 NodeList 数组对象，通过该对象我们可以对任意一个DOM节点上 span 标签进行操作。

如果我们只想查询 id="mybox" 的 div 下的所有 span 标签，我们可以这么做：

方法一：let spanAr = mybox.querySelectorAll('span');
方法二：let spanAr = document.querySelectorAll('#mybox span');

显然，方法一更简洁，不过方法二也有灵活的一面，比方说，我们只想查询 mybox 下的第一子层 p 标签：

let spanAr = document.querySelectorAll('#mybox > p');

或者，所有第一子层的 class="redcolor" 的 p 标签：

let spanAr = document.querySelectorAll('#mydiv>p.redcolor');

从方法二可以发现，参数 selectors 是很灵活使用的，它使用的可以是元素选择器（如div、p、span等）、 id选择器、class选择器，还可以做范围限制，非常实用。

再参考如下示例：

let ar1 = document.querySelectorAll('div'); //查询所有 div 元素
let ar2 = document.querySelectorAll('#mybox, myDiv'); //查询 id="mybox" 和 id="myDiv" 的所有元素
let ar3 = document.querySelectorAll('.mypic'); //查询 class="mypic" 的所有元素
let ar4 = document.querySelectorAll('p[data-text]'); //查询所有含有 data-text="..." 的 p 标签，如 <p data-text="ok">...</p>

上面的示例不可能囊括全部的查询范围或方法，能从中得到启发就好。

最后给一个完整的 querySelectorAll 应用实例：一个 div 元素里有若干的有序列表和无序列表以及几个p段落，我们通过 querySelectorAll 对之进行查询后记录下他们的情景设置，然后单击这些列表和段落改变它们的文本颜色为红色，再单击还原原来的颜色。代码：