DOM:超强的选择标签方法 querySelector 和 querySelectorAll

今天听课，看到上课的朋友在用 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.querySelectorAll("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们。

综合比较来看：

<ul id="ul">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
<script>
let ul= document.getElementById("ul");
let li1 = ul.querySelector("li");
let li2 = ul.querySelectorAll("li");
let li3 = ul.querySelectorAll("li:nth-child(1)");
console.info( li1 );  // 就是第一个li标签
console.info( li2 );  // 节点集合，数组，有4个li元素
console.info( li3 );  // 节点集合，数组,虽然元素只有一个。
</script>

 以上只罗列一些简单的例子，当然，它们还有很多优点，更待发现。

----------------- 2019-8-14 补充编辑 -------------------------

跟getXXXByXXX 的区别：

getXXXByXXX获取的是动态集合，querySelector获取的是静态集合。

demo1:

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<script>
//demo1
let ul = document.getElementsByTagName('ul')[0],
    lis = ul.getElementsByTagName("li"); // 已经获取了li，此时还没添加空li
// 利用 for 添加空 li。也会被“动态”统计进入 getElementsByTagName 中。
for(let i = 0; i < 3 ; i++){
    ul.appendChild(document.createElement("li"));
}
console.log( lis.length);  //6
</script>

demo2:

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<script>
//demo2
let ul2 = document.querySelectorAll('ul')[0],
    lis2 = ul2.querySelectorAll("li");
// 新增 li。但是不会被统计进入 querySelectorAll，因为它是静态的函数。
for(let i = 0; i < 3 ; i++){
    ul2.appendChild(document.createElement("li"));
}
console.log( lis2.length);  //3
</script>