选择标签方法querySelector和querySelectorAll

个人觉得querySelector 和 querySelectorAll 是DOM中超强的选择标签的方式，因为他们接受的参数是类CSS选择符的字符串。因此，感觉它们的功能远超传统的getElementById或者getElementsByTagName之类的，

它们的主要区别在于，querySelector 只找一个标签，querySelectorAll 是找多个标签。

举例说明：有如下HTML结构

<!-- 图片部分 -->
    <ul class="picUl" id="picUl">
        <li>
            <span>美女1</span> 
        </li> 
        <li>
            <span>美女2</span> 
        </li> 
        <li>
            <span>美女3</span> 
        </li>
        <li>
            <span>美女4</span> 
        </li> 
    </ul>
    <!-- 图片部分 end -->
    

1. 通过ID获取标签：以下代码功能一样

let xId = document.getElementById("picUl");
let  xx = document.querySelector("#picUl");

2、通过类名获取标签：

let  picul = document.querySelectorAll(".picUl"); // 文档中所有的类为  .picul 的标签
let  picul2 = document.querySelector(".picUl");  // 第一个类为 .picul 的标签
let  picul3 = xId.querySelectorAll(".picUL");     // xId 下所有类为 .picul 的标签

3、当然也可以通过标签名获取标签：

let  zz = xId.querySelector("p");       //  获取 xId 下第一个p标签
let  xx = document.querySelector("p");   //  获取 文档里 所有的p标签

4、更爽的是，它们支持CSS其他选择方式：

let  x1 = document.querySelectorAll("#picUl>li");   // #picUl 下所有的子标签 li
let  x2 = document.querySelector("#picUl>li:nth-child(1)");  // #picUl下第1个子标签li
let  x3 = document.querySelectorAll("#picUl>li:not(:nth-child(3))"); 
 // #picUl下 非第3个子标签li。也就是 第三个子标签li 的兄弟li们。

作者：stones4zd
来源：CSDN
原文：https://blog.csdn.net/weixin_42703239/article/details/88879736