技術標籤：JS#JS基礎JS#JS高階javascript

Web APIs-day01（Heima）

案例：淘寶點選關閉二維碼

 <script>
        // 3個步驟， 獲取事件源，繫結事件，onclick，新增事件處理程式
        // 獲取事件源，這裡為什麼這個document.querySelector(".close-btn");不行，用sel，寫"i"也行，i作為標籤
        /**
         * 首先，對於getElementsByClassName()方法來說，
            (1) 其返回值是一個偽陣列（元素集合），是通過索引來訪問陣列中的每一個元素的。
         * */
 

        var btn = document.querySelector(".close-btn");
        console.log(btn);
        var box = document.querySelector(".box");
        console.log(box);
        // var box = document.getElementsByClassName(".box");
        // console.log(box);

        // 繫結事件
        btn.
 
onclick = function () {
            // 把那個大盒子隱藏起來,還沒獲取大盒子
            box.style.display = 'none';

        }
    </script>

由此引用對於 getElementsByClassName()和querySelector()用法上的對比與聯絡

• 首先，對於getElementsByClassName()方法來說，

(1) 其返回值是一個偽陣列（元素集合），是通過索引來訪問陣列中的每一個元素的。

(2) 可以通過length屬性來得到元素的個數。
一.getElementsByClassName()

<ul>
    <li class="map1" id="map2"></li>
    <li class="map1"></li>
    <li></li>
</ul>
 
<script>
     //獲取所有class選擇器為map1的元素，並將返回值賦給map
    //即此時的map就是一個偽陣列
    var map=document.getElementsByClassName("map2");
    
    console.log(map.length);//打印出maps陣列的元素個數
    
    for(var i=0;i<map.length;i++)//迴圈遍歷每一個元素
    {
        console.log(map[i]);//通過過索引訪問
    }
 
</script>

二.querySelector()

(1) querySelector() 方法返回文件中匹配指定 CSS 選擇器的一個元素。可以是class選擇器、id選擇器、標籤選擇器等。

(2)需要注意的是：querySelector() 方法僅僅返回匹配指定選擇器的第一個元素。如果你需要返回所有的元素，請使用querySelectorAll() 方法替代。而querySelectorAll() 方法的返回值是一個偽陣列，具體用法和getElementsByClassName()

方法類似。

<ul>
    <li class="map1" id="map2"></li>
    <li class="map1"></li>
    <li></li>
</ul>
<script>
    //獲取標籤選擇器為ul的元素
    var ul1=document.querySelector("ul");
 
    //獲取id選擇器為map2的元素
    var a1=document.querySelector("#map2");
 
 
    //獲取class選擇器為map1的元素
    //且為第一個li元素
    var a2=document.querySelector(".map1");
 
 
  //獲取class選擇器為map1的所有元素
    var a3=document.querySelectorAll(".map1");
    for(var i=0;i<a3.length;i++)//迴圈遍歷每一個元素
    {
        console.log(a3[i]);//通過過索引訪問
    }
 
    console.log(a1);
    console.log(a2);
</script>