querySelector()与querySelectorAll()

<body>
    <div class="box">box1</div>
    <p class="box">box2</p>

    <script>
       
        let boxList = document.querySelectorAll('.box')
        console.log(boxList)

    </script>
</body>

查询元素两种方式 
        1.查询单个元素 : document.querySelector('选择器')  
        2.查询所有元素 : document.querySelectorAll('选择器')
        3.querySelector() 和 querySelectorAll() 区别
            3.1 querySelector() 返回一个dom对象，可以直接修改
                根据选择器查询满足条件的第一个元素
                选择器字符串 注意得加'' 如果是类选择器，还注意加.,例如'.box'
                DOM对象 | null(选择器写错) 如果发现控制台显示null，就去检查是不是选择器写错了
            3.2 querySelectorAll() 返回一个伪数组,不可以直接修改,需要通过下标获取里面的dom对象才可以修改
                根据选择器查询满足条件所有元素
                选择器字符串 注意得加'' 如果是类选择器，还注意加.,例如'.box'
   
    * @description: 
    * @param {string}  
    * @return: 
    */
    let box = document.querySelector('.box')
    console.log(box)

    /**
    * @description:
    * @param {string}  选择器字符串 注意得加'' 如果是类选择器，注意加.,也就是.box
    * @return:  一定会返回伪数组,如果选择器写错就会得到空数组
        伪数组： 只有数组三要素（元素，下标,长度）,没有数组方法，所有是不能修改的，因为数组不是对象，无法使用对象.的方法，但是你可以获取伪数组里的对象，然后再进行修改
    */

WebAPI基础知识回顾

querySelector()与querySelectorAll()