WebAPI基础 DOM对象的获取 querySelector和querySelectorAll

想要对元素进行操作，首先要先获取到这个元素。

根据css选择器来获取DOM元素有以下两种方法：

一、document.querySelector('css选择器')

        querySelector用于获取单个元素，而且是匹配到的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。

示例：

html代码：

    <div>1</div>
    <div>2</div>
    <div class="three">3</div>
    <div>4</div>
    <div>5</div>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

1、querySelector获取的是第一个元素，括号里注意要加单引号

        // 获取第一个元素
        let div1 = document.querySelector('div')
        // 打印输出
        console.log(div1);

控制台输出第一个div

 2、获取指定元素，可以给标签先添加类名或者ID，再按类名或ID查找。（这里只演示按类查找，按ID查找同理）

// 获取第三个元素
        let div3 = document.querySelector('.three')
        console.log(div3);

控制台输出第三个div

 3、注意括号里的内容与css选择器的写法是一致的，我们也可以用其他的方式查找元素

// 获取ul里面最后一个li
        let lastOne = document.querySelector('ul li:last-child')
        console.log(lastOne);

控制台输出ul里面最后一个li

 二、document.querySelectorAll('css选择器')

        querySelectorAll用于获取多个符合条件的元素，获取到的元素会以伪数组的形式存放起来，所以返回的是一个数组对象，我们需要通过遍历数组来获取每一个元素

        // querySelectorAll 获取多个元素 伪数组
        // 获取ul里面的所有li
        let list = document.querySelectorAll('ul li')
        // 通过遍历获取每一个dom对象 dom(文档对象模型)
        for (let i = 0; i < list.length; i++) {
            console.log(list[i]);
        }

控制台输出