论坛 › 马黑黑教程专版 › querySelectorAll应用举例

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

querySelectorAll应用举例

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="..." 的 p 标签，如 <p data-text="ok">...</p>

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

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

<div id="mbox">
        <ul>
                <li>无序列表 item1</li>
                <li>无序列表 item2</li>
                <li>无序列表 item3</li>
                <li>无序列表 item4</li>
        </ul>
        <ol>
                <li>有序列表 item1</li>
                <li>有序列表 item2</li>
                <li>有序列表 item3</li>
                <li>有序列表 item4</li>
        </ol>
        <p>段落一</p>
        <p>段落二</p>
        <p>段落三</p>
        <p>段落四</p>
</div>

<script>
let colorAr = [];
let liAr = mbox.querySelectorAll('li, p');
[...liAr].forEach( (item,key) => {
        colorAr = item.style.color || 'black';
        item.onclick = () => {
                let color = item.style.color;
                item.style.color = color !== 'red' ? 'red' : colorAr;
        };
});
</script>

马黑黑 发表于 2023-2-12 13:27

<div id="mybox">
        <ul>
                <li>无序列表 item1</li>
                <li>无序列表 item2</li>
                <li>无序列表 item3</li>
                <li>无序列表 item4</li>
        </ul>
        <ol>
                <li>有序列表 item1</li>
                <li>有序列表 item2</li>
                <li>有序列表 item3</li>
                <li>有序列表 item4</li>
        </ol>
        <p>段落一</p>
        <p>段落二</p>
        <p>段落三</p>
        <p>段落四</p>
</div>

<script>
let colorAr = [];
let liAr = mybox.querySelectorAll('li, p');
[...liAr].forEach( (item,key) => {
        colorAr = item.style.color || 'black';
        item.onclick = () => {
                let color = item.style.color;
                item.style.color = color !== 'red' ? 'red' : colorAr;
        };
});
</script>

马黑黑 发表于 2023-2-12 13:28

单击二楼任意一个列表或段落，文本会变成红色，再单击还原原来的颜色

起个网名好难 发表于 2023-2-12 18:46

jquery的selector和这类似，不知它俩是谁借鉴的谁。

红影 发表于 2023-2-12 19:04

跟看天书似的{:4_173:}

马黑黑 发表于 2023-2-12 21:49

红影 发表于 2023-2-12 19:04
跟看天书似的

不会吧

马黑黑 发表于 2023-2-12 21:52

起个网名好难 发表于 2023-2-12 18:46
jquery的selector和这类似，不知它俩是谁借鉴的谁。

jQuery是封装的，很方便，但jQuery是基于JS封装的，所以，你的疑问，不言而喻

起个网名好难 发表于 2023-2-12 22:29

马黑黑 发表于 2023-2-12 21:52
jQuery是封装的，很方便，但jQuery是基于JS封装的，所以，你的疑问，不言而喻

嗯， 随便找了个jquery.js看里面确实是用的querySelectorAll, 没有querySelector

马黑黑 发表于 2023-2-12 23:02

起个网名好难 发表于 2023-2-12 22:29
嗯， 随便找了个jquery.js看里面确实是用的querySelectorAll, 没有querySelector

它的开发版还是可以看看的，虽然现在大家都觉得它落伍了。我个人感觉，jQuery的编程思想，后续的各种框架，都是手从中受益。

起个网名好难 发表于 2023-2-12 23:17

马黑黑 发表于 2023-2-12 23:02
它的开发版还是可以看看的，虽然现在大家都觉得它落伍了。我个人感觉，jQuery的编程思想，后续的各种框架 ...

习惯了jquery纯的js就不习惯了， 反之亦然。

马黑黑 发表于 2023-2-12 23:19

起个网名好难 发表于 2023-2-12 23:17
习惯了jquery纯的js就不习惯了， 反之亦然。

凡事一分为二吧。jq带来的好处多多，但是如果没有一定的JS基础，jq也用不好

起个网名好难 发表于 2023-2-12 23:47

马黑黑 发表于 2023-2-12 23:19
凡事一分为二吧。jq带来的好处多多，但是如果没有一定的JS基础，jq也用不好

都是易学难精

马黑黑 发表于 2023-2-13 12:42

起个网名好难 发表于 2023-2-12 23:47
都是易学难精

差不多这个原理

红影 发表于 2023-2-13 14:26

马黑黑 发表于 2023-2-12 21:49
不会吧

这个感觉太难懂了{:4_173:}

马黑黑 发表于 2023-2-13 17:51

红影 发表于 2023-2-13 14:26
这个感觉太难懂了

是有些抽象，但是一旦弄懂，终身受用

查看完整版本: querySelectorAll应用举例