实例演示获取dom元素的两个方法 -

实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取dom元素</title>
</head>
<body>
    <ul>
        <li class="item">1年级</li>
        <li class="item">2年级</li>
        <li class="item">3年级</li>
        <li class="item">4年级</li>
        <li class="item">5年级</li>
    </ul>
    <script>
        //1.将所有的li.item变成红色
        console.dir(document);
        // querySelectorAll(selector):返回一组元素
        console.dir(document.querySelectorAll('.item'));
        const items = document.querySelectorAll('.item');
        for(let i=0;i<items.length;i++){
            console.log(items[i]);
            items[i].style.color='red';
        }
        // items.forEach(item=>(item.style.color='green'));
        // 2.将第一个改为蓝色
        // querySelector:返回一组元素中的第一个，只返回一个，而不是一组
        const firstItem = document.querySelector('.item');
        console.log(firstItem);
        firstItem.style.color='blue';
        console.log(document.body);
        console.log(document.head);
        console.log(document.title);
        // 获取整个html用如下语句
        console.log(document.documentElement);
    </script>
</body>
</html>