querySelector方法

1.querySelector()方法

querySelector方法接收一个css选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null

        <button class="button">onclick1</button>
        <button class="button">onclick2</button>
        <button class="button">onclick3</button>
        <script>
            var button = document.querySelector('.button');
            console.log(button);        // <button class="button">onclick1</button>
        </script>

2.querySeletorAll()方法

querySelectorAll()方法接收的参数与querySelector()方法一样，都是一个CSS选择符，但返回的是所有匹配的元素，而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。

        <button class="button">onclick1</button>
        <button class="button">onclick2</button>
        <button class="button">onclick3</button>
        <script>
            var buttons = document.querySelectorAll('.button');
            console.log(buttons);        // NodeList(3)
            console.log(buttons[0]);    //<button class="button">onclick1</button>
        </script>