20.dom操作

1.DOM Document Object Model

2.DOM定义了表示和修改文档所需要的方法,DOM对象即宿主对象,由浏览器厂商定义,用来操作HTML和xml功能的一类对象,或者说DOM是HTML和XML的标准编程接口.

DOM不能操作css,但是可以通过操作HTML来间接操作css

实现一个tab切换,使用立即执行函数:script部分

    var butDom = document.getElementsByTagName('button');

    var divDom = document.getElementsByTagName('div');

    for (let i = 0; i < butDom.length; i++) {

        (function (n) {

            butDom[n].onclick = function () {

                for (let j = 0; j < butDom.length; j++) {

                    butDom[j].className = "";

                    divDom[j].style.display = "none";

                }

                this.className = "active";

                divDom[n].style.display = "block";

            }

        }(i))

    }