DOM和BOM相关-CFANZ编程社区

DOM，对页面上的HTML标签进行操作。

　　DOM：文档对象模型，js代码去操作HTML标签

document.getElementById("content")

　　BOM：浏览器对象模型，浏览器内置功能

alert("点击了");
confirm("是否删除")；
//    setInterval(function (){
//        console.log(123);
//    }, 1000);  //定时调用函数

注意：用这两个模块可以实现页面的所有效果。但是比较费劲，所以jQuery诞生，这是一个别人封装好了的模块（类库），代码量更少的实现我们想要的功能。

var tag' = document.getElementById("content")；
使用jQuery后可以写成如下
${"#content"}

案例：菜单切换

DOM和BOM相关_html

切换

DOM和BOM相关_ide_02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .group{
            width: 300px;
            border: 1px solid #ddd;
        }
        .group .header{
            background-color: gold;
            padding: 8px 5px;
        }
        .group .menu a{
            display: block;
        }
        /*隐藏样式*/
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="group">
        <div class="item">
            <div class="header" onclick="clickMenu(this);">头部</div>
            <div class="menu">
                <a href="https://www.cnblogs.com/liunaixu/">菜单1</a>
                <a href="https://www.cnblogs.com/liunaixu/">菜单2</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMenu(this);">头部</div>
            <div class="menu">
                <a href="https://www.cnblogs.com/liunaixu/">菜单1</a>
                <a href="https://www.cnblogs.com/liunaixu/">菜单2</a>
            </div>
        </div>
        <div class="item">
            <div class="header" onclick="clickMenu(this);">头部</div>
            <div class="menu">
                <a href="https://www.cnblogs.com/liunaixu/">菜单1</a>
                <a href="https://www.cnblogs.com/liunaixu/">菜单2</a>
            </div>
        </div>
    </div>
    <script>
        function clickMenu(ths) {
            //ths,代指当前点击的标签

            //1、找到自己下面的一个兄弟标签

            //2、给他加上一个样式hide
            var tag = ths.nextElementSibling;
            if(tag.className == "menu"){
                tag.classList.add("hide");
            }else{
                tag.classList.remove("hide");
            }
        }
    </script>
</body>
</html>

由上面可以看出使用DOM比较繁琐，所以引出jQuery模块