一、.document对象：DOM对象模型

document对象的方法：

1)通过id找HTML对象

  1.                  document.getElementById("id名");

2)通过class找HTML对象

  document.getElementsByClassName("class名");

<body>
    <ul>
        <li class="l1">测试内容</li>
        <li class="l1">测试内容</li>
        <li class="l1">测试内容</li>
    </ul>

    <script>
        //让class的值为l1的一个对象变色
        // var lis = document.getElementsByClassName("l1");
        // lis[0].style.color = "blue";
        // lis[1].style.color = "chocolate";
        // lis[2].style.color = "green";


        // 让所有class的值为l1的HTML对象全部变色
        var lis = document.getElementsByClassName("l1");
        for(var i = 0;i < lis.length;i++){
            lis[i].style.color = "red";
        }

</script>
</body>

3)通过标签名找HTML对象

      document.getElementsByTagName("标签名");

<body>
    <ul id="U">
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
    </ul>

    <ol id="O">
        <li>测试内容</li>
        <li>测试内容</li>
        <li>测试内容</li>
    </ol>

    <script>
        // 通过标签名找到一组HTML对象，对其中一个进行操作
            // var lis = document.getElementsByTagName("li");
            // lis[0].style.fontWeight = "bold";
            // lis[1].style.fontSize = "24px";
            // lis[2].style.color = "pink";

        // 通过标签名找到一组HTML对象，对其所有进行操作
            // var lis = document.getElementsByTagName("li");
            // for(var i = 0;i <= lis.length;i++){
            //     lis[i].style.color = "red";
            // }

        // 进行隔行变色
            // var lis = document.getElementsByTagName("li");
            // for(var i = 0;i <= lis.length;i++){
            //     if(i % 2 == 0){
            //         lis[i].style.color = "red";
            //     }else{
            //         lis[i].style.color = "blue";
            //     }
            // }


        // 有相同HTML名字的标签对象寻找方法
            // var ul = document.getElementById("U");
            // var lis = ul.getElementsByTagName("li");
            // for(var i = 0;i <= lis.length;i++){
            //     if(i % 2 == 0){
            //         lis[i].style.color = "red";
            //     }else{
            //         lis[i].style.color = "blue";
            //     }
            // }

</script>
</body>

4)通过name名找HTML对象

      document,getElementsByName("name名");

<body>
    <input type="checkbox" name="AllCheck" id="BTN">全选<br>

    <input type="checkbox" name="aiHao" id="">敲代码
    <input type="checkbox" name="aiHao" id="">喂李林玉吃煤球
    <input type="checkbox" name="aiHao" id="">玩游戏
    <input type="checkbox" name="aiHao" id="">打篮球

    <script>
        var aiHao = document.getElementsByName("aiHao");
        // 给 AllCheck 一个点击函数
        document.getElementsByName("AllCheck")[0].onclick = function(){
            // 判断 当this.checked == true的时候 是默认状态
            if(this.checked == true){
                // 循环遍历 让每一个name为aiHao的复选按钮都为true
                for(var i = 0;i < aiHao.length;i++){
                    aiHao[i].checked = true;
                }
            }else{
                // 循环遍历 让每一个name为aiHao的复选按钮都为false
                for(var i = 0;i < aiHao.length;i++){
                    aiHao[i].checked = false;
                }
            }
        }
</script>
</body>

注意：带s类的方法，找到的是一组对象（HTMLCollection HTML对象的集合）
想对一组对象里的其他一个进行操作，写法：HTMLCollection[位置]
想对一整组对象进行一个操作，需要进行for循环

二、地址栏对象 window.location

（1）location 的属性

获取地址(取得或设置地址栏的地址)
window.location.href;

（2）location 的方法

跳转页面
window.location.replace(“http://“);
刷新页面
window.location.reload();

三、window的历史对象history

（1）属性

history.length;

（2）方法

后退：history.back();
前进：history.forward();
正数前进几步，负数后退几步：histo.go(正数或负数);