(总结3)HTML5中获取元素新增的dom方法以及类名操作

document.querySelector(" ");　　单个元素获取
document.querySelectorAll(" "); 　　多个元素获取

 1 <div class="box box1"></div>
 2 <div class="box box2"></div>
 3 <div class="box box3" id="box3"></div>
 4 <div class="box box4"></div>
 5
 6 <script>
 7     //H5中获取单个元素     document.querySelector
 8     var box1 = document.querySelector(".box1");
 9     var box3 = document.querySelector("#box3");
10     box1.style.backgroundColor = "red";
11     box3.style.backgroundColor = "pink";
12 
13     //H5中获取多个元素(获取的是个数组)     document.querySelectorAll
14     var boxArr = document.querySelectorAll(".box");
15     boxArr[3].style.backgroundColor = "green";
16     //for循环进行遍历操作
17     for(var i = 0;i<boxArr.length;i++){
18         boxArr[i].innerText = i;
19     }
20 </script>

新增的类名操作：加、删、判断、切换
加：

box.classList.add("active");

删：

box.classList.remove("active");

判断：

box.classList.contains("active")； >>>>返回值是一个布尔值，true or false

切换：

box.classList.toggle("active");

<style>
        div{
            width: 300px;
            height: 100px;
            margin: 10px auto;
            border: 1px solid #000;
        }
        .active {
            border-radius:50%;
            background-color: hotpink;
        }
</style>

<body>
    <button>box1的active类名切换</button>
    <div class="box box1"></div>
    <div class="box box2"></div>
    <div class="box box3"></div>
    <div class="box box4"></div>
    <script>

        var btn = document.querySelector("button");
        var box1 = document.querySelector(".box1");
        var box3 = document.querySelector(".box3");
        var box4 = document.querySelector(".box4");

        //H5中新增的操作类名方法
        //添加类名：
        box3.classList.add("active");
        box4.classList.add("active");

        //删除类名
//        box4.classList.remove("active")

        //判断是否有类名
        var bol = box4.classList.contains("active");
        console.log(bol);
        if( bol  =  false){
            box4.classList.add("active");
        }

        //类名切换
        btn.onclick = function () {
            box1.classList.toggle("active");
        }
    </script>
</body>