machinecat520
/
zj-Exercise


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
							<!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>Document</title>
    <script>

        window.onload = function () {
            //获取body标签
            // var body = document.getElementsByTagName("body")[0];
            // alert(body);
            /*
            在document中有一个属性body，他保存的是body的引用
            */
            var body = document.body;
            console.log(body);

            /*
            document.documentElement保存的是html根标签
            */
            var html = document.documentElement;
            // alert(html);

            /*
            document.all代表页面中所有的元素
            */
            var all = document.all;
            // console.log(all);
            // console.log(all.length);
            // for (var i = 0; i < all.length; i++) {
            //     console.log(all[i]);
            // }

            // all = document.getElementsByTagName("*");
            // console.log(all);
            // console.log(all.length);

            /*
            根据元素的class属性值查询一组元素节点对象
                getElementsByClassName()可以根据class属性值获取一组元素节点对象，
                但是该方法不支持IE8及以下的浏览器
            */

            // var box1 = document.getElementsByClassName("box1");
            // console.log(box1.length);

            //获取页面中的所有的div
            // var divs = document.getElementsByTagName("div");
            // console.log(divs.length);

            //获取class为box1中的所有的div
            //.box1 div
            /*
            document.querySelector()
                -需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
                -虽然IE8中没有getElementsByClassName()，但是可以使用querySelector()代替
                    这个方法更加灵活
                -使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个

            */
            // var div = document.querySelector(".box1 div");
            // console.log(div);
            // console.log(div.innerHTML);

            // var box1 = document.querySelector(".box1");
            // console.log(box1);
            // console.log(box1.innerHTML);

            /*
            document.querySelectorAll()
                -该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
                -即使符合条件的元素只有一个，也会返回数组
            */
            var box1 = document.querySelectorAll(".box1");
            // console.log(box1.length);

        };


    </script>
</head>

<body>
    <div class="box1">
        <div>box1中的div</div>
    </div>
    <div class="box1">
        <div>box1中的div</div>
    </div>
    <div></div>
</body>

</html>