一、什么是DOM？

概念：文档对象模型（Document Object Model）

通过DOM可以动态改变文档内容

二、document对象的常用方法

方法	描述
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

1、三种访问页面元素的区别

2、页面的显示与隐藏

(1)visibility属性的值

语法：object.style.visibility="值"

值	描述
visible	表示元素是可见的
hidden	表示元素是不可见的

(2)display属性的值

语法：object.style.display="值"

值	描述
none	表示此元素不会被显示
block	表示此元素将显示为块级元素，此元素前后会带有换行符

3、二级菜单

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .clearfix::after {
            display: block;
            content: "";
            clear: both;
        }

        .box {
            width: 1200px;
            margin: 0 auto;
            background-color: #ccc;
        }

        .box>li {
            position: relative;
            float: left;
        }

        .box li {
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

        .box li a {
            display: block;
            color: #000;
            font-size: 14px;
        }

        .box li .er {
            /* display: none; */
            position: absolute;
            top: 50px;
            left: 0;
            width: 200px;
            background-color: #ccc;
        }

        .box .ji {
            display: none;
        }
    </style>
</head>

<body>
    <ul class="box clearfix" id="head">
        <li><a href="#">首页</a></li>
        <li> <a href="#">产品服务</a>
            <!-- 二级菜单 -->
            <ol class="er ji">
                <li><a href="#">产品概述</a></li>
                <li><a href="#">实施步骤</a></li>
                <li><a href="#">服务体系</a></li>
                <li><a href="#">获取报价</a></li>
            </ol>
        </li>
        <li>
            <a href="#">解决方案</a>
            <ol class="er ji">
                <li><a href="#">流向管理解决方案</a></li>
                <li><a href="#">绩效考核解决方案</a></li>
                <li><a href="#">活动管理解决方案</a></li>
                <li><a href="#">返利款项解决方案</a></li>
                <li><a href="#">获取专属解决方案</a></li>
            </ol>
        </li>
        <li>
            <a href="#">案例</a>
            <ol class="er ji">
                <li><a href="#">制药企业应用案例</a></li>
                <li><a href="#">推广公司应用案例</a></li>
                <li><a href="#">招商公司应用案例</a></li>
                <li><a href="#">医疗器械应用案例</a></li>
            </ol>
        </li>
        <li>
            <a href="#">实施研究</a>
        </li>
        <li>
            <a href="#">关于我们</a>
            <ol class="er ji">
                <li><a href="#">企业介绍</a></li>
                <li><a href="#">加入我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ol>
        </li>
    </ul>
</body>
<script>
    var lis = document.getElementById("head").getElementsByTagName("li");
    for (let i = 0; i < lis.length; i++) {
        lis[i].onmouseover = function () {
            this.style.backgroundColor = "#f00";
            var oul = this.getElementsByTagName("ol")[0];
            if (oul != undefined) {

                oul.className = "er";
            }
        };
        lis[i].onmouseout = function () {
            this.style.backgroundColor = "";
            var oul = this.getElementsByTagName("ol")[0];
            if (oul != undefined) {
                oul.className = "er ji";
            }
        };
    }


</script>

4、选项卡

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .box {
            width: 300px;
            margin: 0 auto;
        }

        .box .nav {
            width: 300px;
            height: 40px;
            line-height: 40px;

            background-color: #ccc;
        }

        .box .nav li {
            float: left;
            width: 100px;
            text-align: center;
        }

        .box .nav li.on {
            background-color: #0ff;
        }

        .box .cont {
            width: 300px;
            box-shadow: 0 0 0 2px #999 inset;
        }

        .box .cont .zuo {
            display: none;
            padding: 10px;
            overflow: hidden;
        }

        .box .cont .zuo img {
            height: 100px;
            vertical-align: top;
        }

        .box .cont .zuo .you {
            display: inline-block;
            line-height: 40px;
            margin-top: 15px;

        }

        .box .cont .zuo .you a>span {
            height: 40px;
            line-height: 40px;
            color: #000;
            border-bottom: 1px solid #ccc;
        }


        .box .cont .zuo:nth-of-type(1) {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul class="nav">
            <li class="on"><a href="#">热销</a></li>
            <li><a href="#">推荐</a></li>
            <li><a href="#">经典</a></li>
        </ul>
        <div class="cont">
            <ol class="zuo">
                <li>
                    <a href="#"><img src="img/pic1.jpg" alt=""></a>
                    <div class="you">
                        <a href="#"> <span>九月必败6款短外套</span></a>
                        <br>
                        <a href="#"> <span>十款约会装恋爱运UP</span></a>
                    </div>
                </li>

                <li>
                    <a href="#"><img src="img/pic2.jpg" alt=""></a>

                    <div class="you">
                        <a href="#"> <span>推荐13款出游美妆扮</span></a>
                        <br>
                        <a href="#"> <span>12星座IQ谁最高</span></a>
                    </div>
                </li>

                <li><a href="#"><img src="img/pic3.jpg" alt=""></a>
                    <div class="you">
                        <a href="#"> <span>星座MM的美容妙招</span></a>
                        <br>
                        <a href="#"> <span>不能同居的星座冤家</span></a>
                    </div>
                </li>

            </ol>

            <ol class="zuo">
                <li><a href="#"><img src="img/1.png" alt=""></a>
                    <div class="you">
                        <a href="#"> <span>九月必败6款短外套</span></a>
                        <br>
                        <a href="#"> <span>十款约会装恋爱运UP</span></a>
                    </div>

                </li>
                <li><a href="#"><img src="img/2.png" alt=""></a>

                    <div class="you">
                        <a href="#"> <span>推荐13款出游美妆扮</span></a>
                        <br>
                        <a href="#"> <span>12星座IQ谁最高</span></a>
                    </div>


                </li>
                <li><a href="#"><img src="img/3.png" alt=""></a>
                    <div class="you">
                        <a href="#"> <span>星座MM的美容妙招</span></a>
                        <br>
                        <a href="#"> <span>不能同居的星座冤家</span></a>
                    </div>
                </li>
            </ol>

            <ol class="zuo">
                <li>
                    <a href="#"><img src="img/try1.jpg" alt=""></a>
                    <div class="you">
                        <a href="#"> <span>九月必败6款短外套</span></a>
                        <br>
                        <a href="#"> <span>十款约会装恋爱运UP</span></a>
                    </div>
                </li>
                <li>
                    <a href="#"><img src="img/try2.jpg" alt=""></a>
                    <div class=" you">
                        <a href="#"> <span>推荐13款出游美妆扮</span></a>
                        <br>
                        <a href="#"> <span>12星座IQ谁最高</span></a>
                    </div>
                </li>
                <li>
                    <a href="#"><img src="img/try3.jpg" alt=""></a>
                    <div class=" you">
                        <a href="#"> <span>星座MM的美容妙招</span></a>
                        <br>
                        <a href="#"> <span>不能同居的星座冤家</span></a>
                    </div>
                </li>
            </ol>
        </div>
    </div>
</body>
<script>
    var lis = document.querySelectorAll(".nav li");
    var oul = document.querySelectorAll(".cont .zuo");
    //第一种

    /*  for (let i = 0; i < lis.length; i++) {
          lis[i].onclick = function () {
              for (var j = 0; j < lis.length; j++) {
                  lis[j].className = "";
                  oul[j].style.display = "none";
              }
  
              this.className = "on";
              oul[i].style.display = "block";
          };
      }  */



    //第二种
    for (let i = 0; i < lis.length; i++) {
        lis[i].a = i;
        lis[i].onclick = function () {
            var index = this.a;
            for (var j = 0; j < lis.length; j++) {
                lis[j].className = "";
                oul[j].style.display = "none";
            }
            this.className = "on";
            oul[index].style.display = "block";
        };
    }
</script>

5、多选框

<body>
    <input type="checkbox" id="all" checked />
    <label for="all">全选</label>
    <button id="rev">反选</button>
    <p>
        <input type="checkbox" id="box1" class="fruit" />
        <label for="box1"> 苹果</label>
        <input type="checkbox" id="box2" class="fruit" />
        <label for="box2"> 香蕉</label>
        <input type="checkbox" id="box3" class="fruit" />
        <label for="box3"> 橘子</label>
    </p>
</body>
<script>
    var all = document.getElementById("all");
    var fruit = document.querySelectorAll(".fruit");
    var rev = document.getElementById("rev");

    /*    all.onclick = function () {
            var t = all.checked;
            // var t =this.checked;
            // console.log(all.checked);
            if (t === true) {
                for (var i = 0; i < fruit.length; i++) {
                    fruit[i].checked = true;
                }
            } else {
                for (var i = 0; i < fruit.length; i++) {
                    fruit[i].checked = false;
                }
            }
        }; */

    /*
        all.onclick = function () {
    
            var t = this.checked;
            // console.log(all.checked);
            if (t) {
                for (var i = 0; i < fruit.length; i++) {
                    fruit[i].checked = true;
                }
            } else {
                for (var i = 0; i < fruit.length; i++) {
                    fruit[i].checked = false;
                }
            }
        };  */

    all.onclick = function () {
        var t = this.checked;
        for (let i = 0; i < fruit.length; i++) {
            fruit[i].checked = t;
        }

    };

    //反选

    rev.onclick = function () {
        for (let i = 0; i < fruit.length; i++) {
            fruit[i].checked = !fruit[i].checked;
        }

    }
</script>