根据CSS选择器来查询一个元素节点对象(querySelectorAll)

本文链接：https://blog.youkuaiyun.com/linqunbin/article/details/90582302

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <Script>
        window.onload = function(){
            /*
                根据元素的class属性值查询一组元素节点对象
                getElementsByClassName()可以根据class属性值获取一组元素节点对象
                但是该方法不支持IE8及以下的游览器
            */
            var box1 = document.getElementsByClassName('box1');
            console.log(box1.length);

            /* 获取class为box1中所有的div
            document.querySelector()
            - 需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象
            - 虽然IE8中没有getElementsByClassName()但是可以用querySelector()代替
            - 使用该方法,它总会返回唯一的一个元素,如果满足的条件元素有多个,那么它只会返回第一个.
            */
            var div = document.querySelector(".box1 div");
            console.log(div.length, div.innerHTML);
            for (var i=0; i<div.length; i++){
                console.log(div[i].innerHTML);
            }

            // document.querySelectorAll()
            // 该方法与querySelector类似,不同的是它会将符合条件的元素封装到一个数组中返回.
            // 即时符合条件的元素只有一个,它也会返回数组.
            var divs = document.querySelectorAll(".box1 div");
            console.log(divs.length, div.innerHTML);
            for (var i=0; i<divs.length; i++){
                console.log(divs[i].innerHTML);
            }
        };
    </Script>
</head>
<body>
    <div>
        <div class="box1">
            <div>
                我是box1中的div1.
            </div>
        </div>
        <div class="box1">
            <div>
                我是box1中的div2.
            </div>
        </div>
        <div class="box1">
            <div>
                我是box1中的div3.
            </div>
        </div>
    </div>
</body>
</html>