10_js_浏览器对象模型（BOM）

发布时间：2024年01月21日

window对象的理解
window对象的常用属性讲解
window对象的常用方法讲解

1. BOM对象

1.1. 什么是BOM

BOM（Browser Object Model）即浏览器对象模型，其核心对象是 window。
- window 对象表示一个包含 DOM 文档的窗口，其 document 属性指向窗口中载入的 DOM 文档。
  - 解释：window代表浏览器窗口，document是属于浏览器里面的内容。比如浏览器可以进行缩放，还可以进行日志输出调试，这些都不是属于document。
  - 总结：docuement是属于window的，就如网页内容是属于浏览器的。
- window作为全局变量，代表了脚本正在运行的窗口，暴露给 Javascript 代码。
  - window.document
  - window.console.log("...")
  - window.alert("...");
  - window作为全局变量在使用的时候是可以省略的。
课堂案例：1.window对象的理解.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
            window:作为全局变量     所以window下的属性和方法都可以不加 window 直接调用
            this:代表的是当前对象
         */
        
        console.log(this)   //Window

        function func1(){
            console.log(this)     //Window
        }

        func1();

        /* 
            window：
                1.包含了document对象，document对象就是window的属性
         */
         // document.querySelector
         // window.document
         //

         console.log()
         window.console.log("haha")
         alert("...")
         window.alert("haha")
    </script>
</body>
</html>

1.2 页面初始化事件

window.load 事件在整个页面及所有依赖资源如样式表和图片都已完成加载时触发。
DOMContentLoaded：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。
课堂案例：2.页面初始化加载事件.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="3.css">        加载完后执行onload事件 -->
</head>

<body>
    <!-- <img src="1.png" alt="xxx">        加载完后执行onload事件  -->
    <div>
        111
    </div>
    <span>
        222
    </span>

    <button>按钮</button>

    <script>
        /* 
            页面初始化事件的两种方式
                1.onload:   这个初始化后执行的函数可以使用多次吗
                            不可以，谁最后被加载就调用谁
                            (全部加载完之后执行)

                2.DOMContentLoaded: ：当初始的 **HTML** 文档被完全加载和解析完成之后，**`DOMContentLoaded` **事件被触发，
                                      而无需等待样式表、图像和子框架的完全加载
                                      (加载完标签后执行，不等待标签里的内容)

                注册事件的补充知识点：
                    1.如果基于事件属性的方式注册，有相同的代码会使用最后加载的代码，并且值会执行一次
                    2.如果是基于监听器的方式注册事件，那么注册几个就会执行几个
         */
         const btn = document.querySelector("button")

        //  btnObj.onclick = function(){
        //      console.log("btn_onclick1")
        //  }

        //  btnObj.onclick = function(){
        //      console.log("btn_onclick2")
        //  }

        btn.addEventListener("click",function(){
            console.log("click1")
        })

         btn.addEventListener("click",function(){
            console.log("click2")
        })


         

        //  window.onload = function(){
        //     console.log("onload111")
        //  }

        //  window.onload = function(){
        //     console.log("onload222")
        //  }

        //  window.onload = function(){
        //     console.log("onload333")
        //  }

        /* 
            注册事件的时候，监听器注册事件可以多次执行
                           属性注册的事件只会执行最后的事件
         */
        window.addEventListener("load", function () {
            console.log("load111")
        })

        window.addEventListener("load", function () {
            console.log("load222")
        })

        window.addEventListener("load", function () {
            console.log("load333")
        })

        // window.addEventListener("DOMContentLoaded", function () {
        //     console.log("DOMContentLoaded444")
        // })

        // window.addEventListener("DOMContentLoaded", function () {
        //     console.log("DOMContentLoaded555")
        // })

        // window.addEventListener("DOMContentLoaded", function () {
        //     console.log("DOMContentLoaded666")
        // })


        document.onDOMContentLoaded = function () {
            console.log("onDOMContentLoaded111")
        }

        window.onDOMContentLoaded = function () {
            console.log("onDOMContentLoaded222")
        }

        window.onDOMContentLoaded = function () {
            console.log("onDOMContentLoaded333")
        }
    </script>
</body>

</html>

1.3 浏览器窗口大小变化触发函数

文档视图调整大小时会触发 resize 事件。
innerWidth** 返回以像素为单位的窗口的内部宽度。如果垂直滚动条存在，则这个属性将包括它的宽度。
innerHeight：浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。
课堂案例：3.窗口大小变化会触发函数.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: goldenrod;
        }


    </style>
</head>
<body>
    <div>
        
    </div>

    <script>
        const divObj = document.querySelector("div")
        /* 
            resize：浏览器窗口会触发该事件
         */
        window.addEventListener("resize",function(){
            console.log(window.innerWidth)
            console.log(window.innerHeight)
            /* 
                如果当前的窗口的宽度小于等于600px，就隐藏页面的div
             */
             if(window.innerWidth <=600){
                 divObj.style.display = 'none';
             }else{
                 divObj.style.display = 'block'
             }
        })
    </script>
</body>
</html>

2.定时触发执行函数

2.1 window.setTimeout函数讲解

课堂案例：4.window.setTimeout函数讲解.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
            需求：想让一个函数在3秒以后执行
                  delay:毫秒值

            setTimeout:只能执行一次，
         */

         setTimeout(function(arg1,arg2,arg3){
             console.log("3秒后执行")
             console.log(arg1)
             console.log(arg2)
             console.log(arg3)
         },3000,1,2,3)

         function func1(){
             console.log("5秒后执行")
         }
         const timeout1 = setTimeout(func1,5000)
         console.log(timeout1)  //2         定时器的编号

         const settime3 = setTimeout(function(){
             console.log("hahah")
         },1000)
         console.log(settime3)      //3
    </script>
</body>
</html>

全局的 setTimeout() 方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。

课堂案例：5.取消setTimeout定时器.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button>取消定时器</button>

    <script>

        /* 
            取消定时器需要基于setTimeout的返回值
         */
        const btnObj = document.querySelector("button")
       const timeOut1 =  setTimeout(function(){
            console.log("3秒后执行函数")
        },3000)

        btnObj.onclick = function(){
            clearTimeout(timeOut1)
        }
    </script>
</body>
</html>

内置的 clearTimeout() 方法取消了先前通过调用setTimeout()建立的定时器。

2.2 window.setInterval函数讲解

课堂案例：6.setInterval函数讲解.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
            需求：每隔2秒执行函数
         */
        setInterval(function(){
            console.log("定时调用")
        },2000)
    </script>
</body>
</html>

setInterval() 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。

课堂案例：7.页面倒计时效果.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height: 60px;
            margin: 100px auto;
            background-color:pink;
        }
        span{
            display: inline-block;
            width: 80px;
            height: 50px;
            font-size: 16px;
            text-align: center;
            color: red;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div>
        商品秒杀倒计时
        <span class="h">00小时</span>
        <span class="m">00分钟</span>
        <span class="s">00秒</span>

    </div>

    <script>
           const spanHObj = document.querySelector(".h")
           const spanMObj = document.querySelector(".m")
           const spanSObj = document.querySelector(".s")

           //商品的秒杀时间
           const createTime = new Date("2023-12-2 21:00:00")

           //计算出：商品的秒杀时间距离当前时间还有多久
           function payment(){
               const currentTime = new Date();
               const timeSecond = (createTime-currentTime)/1000;
               //计算出小时
               let h = parseInt(timeSecond/60/60%24)        //这个是保证是24小时以内，去掉就是24小时以上
               spanHObj.innerHTML = h+"小时";

               //计算分钟
               let m = parseInt(timeSecond/60%60)
               spanMObj.innerHTML = m+"分钟";

               //计算秒
               let s = parseInt(timeSecond%60)  
               spanSObj.innerHTML = s+"秒";
           }

           //加上计时器
           setInterval(payment,1000)
           setInterval(payment(),1000)
    </script>
</body>

</html>

课堂案例：8.取消setInterval定时器.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button>开始</button>
    <button>停止</button>

    <script>
        const btns = document.querySelectorAll("button")
        let setInterval1;
        btns[0].addEventListener("click", function () {
            setInterval1 = setInterval(function () {
                console.log('开始')
            }, 1000)
        })

        btns[1].addEventListener("click", function () {
            clearInterval(setInterval1)
            console.log('停止')
        })
    </script>

</body>

</html>

clearInterval() 方法可取消先前通过 setInterval() 设置的重复定时任务。

2.3 发送短信倒计时效果

课堂案例：9.发送短信验证案例.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    手机号：<input type="text"> <button>获取验证码</button>

    <script>
        //需要倒计时的60秒
        let time = 3;
        const btnObj = document.querySelector("button")
        btnObj.addEventListener("click",function(){
            this.disabled = true;
            //设置一个定时效果
            const setInterval1 = setInterval(function(){
                if(time!=0){
                    time--;
                    btnObj.innerText = '等待'+time+"秒可以再次点击"
                }else{
                    //取消定时器
                    console.log(this)
                    clearInterval(setInterval1)
                    btnObj.disabled = false;
                    btnObj.innerText = '获取验证码'
                    time =3;
                }
            },1000)
        })
    </script>
</body>
</html>

3. location对象

3.1 定时跳转页面案例

Location 接口表示其链接到的对象的位置（URL）。所做的修改反映在与之相关的对象上。 Document 和 Window 接口都有这样一个链接的 Location，分别通过 Document.location和Window.location 访问。
课堂案例：10.定时跳转页面.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <base target="_blank"> -->
</head>
<body>
    <!-- <a href="https://www.baidu.com/">百度</a> -->

    <button>跳转到百度</button>
    <div></div>
    <script>
        // console.log(window.location)
        // console.log(document.location)
        
        const btnObj = document.querySelector("button")
        const divObj = document.querySelector("div")
        btnObj.addEventListener("click",function(){
            // window.location   或者 location

            location.href = 'https://www.baidu.com/'
        })

        let time =3;
        setInterval(function(){
            if(time!=0){
                divObj.innerText= '将在'+time+'秒后跳转到百度'
                time--;
            }else{
                location.href= 'https://www.baidu.com/' 
            }
        },1000)
    </script>
</body>
</html>

3.2 location对象的常见方法

课堂案例：11.location常见的方法.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>

    <script>
        const btnObj = document.querySelector("button")
        btnObj.addEventListener("click",function(){
            location.assign("https://www.jd.com/")
            
        })
    </script>
</body>
</html>

Location.assign() 方法会触发窗口加载并显示指定的 URL 的内容。

Location.replace() 方法以给定的 URL 来替换当前的资源。与 assign() 方法不同的是，调用 replace() 方法后，当前页面不会保存到会话历史中，这样，用户点击回退按钮时，将不会再跳转到该页面。

课堂案例：12.登录参数提交解析案例.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 
        action：填写表单参数提交到url（需要的是服务器地址进行解析提交参数）
        在当前案例中：就提交到html文件做演示
     -->
    
    <form action="13.login_action.html">
        用户名：<input type="text" name="aaa"><br>
        密码：<input type="text" name="bbb" ><br>
        <input type="submit"  value="登录">
    </form>
</body>
</html>

Location 接口的 search 属性会返回一段 USVString，其中包含一个 URL 标识中的 '?' 以及跟随其后的一串 URL 查询参数。

课堂案例：13.login_action.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 
        把用户填写的账号和密码解析出来显示到div
     -->
     <div>
         
     </div>

     <script>
         /* 
            1.获取到用户输入的账号和密码
            ?:左边是服务器地址
            ?:右边是用户输入的参数信息
                参数就是 标签的name属性和value属性组成的
            file:///D:/java_vev/web/workepace/front-end/02-javaScript/day10/13.login_action.html?username=%E5%BC%A0%E4%B8%89&password=123
          */

          console.log(location.search)      // ?aaa=zhangsan&bbb=12345
          const divObj = document.querySelector("div")
          const values = location.search.split("&")
          console.log(values[0].split('=')[1])  //获取=右边的值
          console.log(values[1].split('=')[1])
          divObj.innerHTML='账号'+values[0].split('=')[1]+'密码'+values[1].split('=')[1]


          console.log("------------")
          console.log(values[0].split("=")[0])
          console.log(values[0].split("=")[1])
     </script>
</body>
</html>

4. navigator对象

课堂案例：14.navigator对象.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        
    </div>

    <script>

        /* 
            主要是用来获取客户端(浏览器+操作系统等)信息
         */
        //用户使用的操作系统相关的信息
        console.log(window.navigator.userAgent)
        //语言
        console.log(window.navigator.language)
        //浏览器版本
        console.log(window.navigator.appVersion)
    </script>
</body>
</html>

主要是用来获取客户端（浏览器+操作系统等等）的信息

5 history对象

History 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。
课堂案例：15.history对象1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <a href="16.history对象2.html">16.history对象2.html</a>
    <button>跳转</button>

    <script>
        const btnObj = document.querySelector("button")
        btnObj.addEventListener("click",function(){
            //前进
            // window.history.forward();  //是在历史记录里前进后退
            history.go(1)           //和上面是一样的
        })
    </script>
</body>
</html>

课堂案例：16.history对象2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <a href="15.history对象1.html">15.history对象1.html</a>
    <button>跳转</button>

    <script>
        const btnObj = document.querySelector("button")
        btnObj.addEventListener("click",function(){
            //回退
            // window.history.back();
            history.go(-1)
        })
    </script>
</body>
</html>

6 作业讲解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    请选择省份：
    <select name="" id="provence">
        <option value="">请选择</option>
        <option value="zj">浙江省</option>
        <option value="hb">湖北省</option>
        <option value="gd">广东省</option>
    </select>

    <select name="" id="hb" >
            <option value="">请选择</option>
            <option value="zj">武汉市</option>
            <option value="hb">锦州市</option>
            <option value="gd">鄂州市</option>
        </select>

        <select name="" id="zj">
                <option value="">请选择</option>
                <option value="zj">嘉兴市</option>
                <option value="hb">杭州市</option>
                <option value="gd">衢州市</option>
            </select>

    <script>
        /* 
            需求：
                1.选择对应的省份的时候，输出该option标签的value值
                1.根据选择的省份选择对应的城市
         */
         const selectObj = document.querySelector("#provence")
         const hbObj = document.querySelector("#hb")
         const zjObj = document.querySelector("#zj")
         console.dir(selectObj);
         const options = selectObj.options;
         //当改变选项的时候，触发事件

         /* selectObj.onclick = function(){
             console.log('change')       //会触发两次
         } */

           selectObj.addEventListener("change",function(){
                // console.log('改变')

                //这个还会返回当前选择的option对应的index
                // console.log(selectObj.options)
                // console.log(selectObj.children)

                // console.log(options[])
                //如何单独的获得当前选中的index
                // console.log(selectObj.selectedIndex)
                console.log(options[selectObj.selectedIndex].value)
                console.log(options[selectObj.selectedIndex].innerHTML)
            })

            console.log("---------------")
            // console.log(selectObj[0])
            // console.log(selectObj[1])
            selectObj[1].addEventListener("change",function(){

            })


    </script>
</body>
</html>

17.课堂作业.html

文章来源:https://blog.csdn.net/2301_80008556/article/details/135725450
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！