JavaScript进阶知识(BOM)-快速入门篇

矫情吗；* 2021-09-08 08:56 457阅读 0赞

# BOM #

> BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

## 1.Window：窗口对象 ##

Window：窗口对象
        1. 创建
        2. 方法
             1. 与弹出框有关的方法：
                alert()	显示带有一段消息和一个确认按钮的警告框。
                confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
                    * 如果用户点击确定按钮，则方法返回true
                    * 如果用户点击取消按钮，则方法返回false
                prompt()	显示可提示用户输入的对话框。
                    * 返回值：获取用户输入的值

demo

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
    <img id="demo" src="images/d.png">
    <script> //弹窗 alert("hello window") //弹窗带确认和取消 confirm("您确定要退出吗") //弹窗带输入框 let str = prompt("请输入用户名") //获取输入框内容并且弹出 alert(str) </script>
    </body>
    </html>

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 2]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 3]

与打开关闭有关的方法：
                close()	关闭浏览器窗口。
                    * 谁调用我 ，我关谁
                open()	打开一个新的浏览器窗口
                    * 返回新的Window对象

demo

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
    <input id="open" type="button" value="打开百度">
    <input id="close" type="button" value="关闭百度">
    <script> //通过id获取按钮元素 let demo = document.getElementById("open") //定义新弹窗对象 var newWindow //绑定单击事件 demo.onclick=function (){ //单击事件对应的操作 newWindow=open("https://www.baidu.com/") } //通过id获取关闭按钮元素 let demo2 = document.getElementById("close") //绑定单击事件 demo2.onclick=function (){ //关闭新窗口 newWindow.close() } </script>
    </body>
    </html>

效果  
![在这里插入图片描述][20210615202247715.png]

![在这里插入图片描述][20210615201810316.png]

与定时器有关的方式
                setTimeout()	在指定的毫秒数后调用函数或计算表达式。
                    * 参数：
                        1. js代码或者方法对象
                        2. 毫秒值
                    * 返回值：唯一标识，用于取消定时器
                clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
    
                setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
                clearInterval()	取消由 setInterval() 设置的 timeout。

demo

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
    <script> //一次性定时器 let id1=setTimeout("fun()",3000) //定义定时器对应函数 function fun(){ alert("boom~~") } //取消定时器 //clearTimeout(id1) //循环定时器 let id2=setInterval(fun,2000) //取消定时器 clearInterval(id2) </script>
    </body>
    </html>

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 4]

属性
            1. 获取其他BOM对象：
                history
                location
                Navigator
                Screen:
            2. 获取DOM对象
                document

> 注意
> 
>  *  Window对象不需要创建可以直接使用 window使用。 window.方法名();
>  *  window引用可以省略。 方法名();

## 2.Location地址栏对象 ##

1. 创建(获取)：
    		1. window.location
    		2. location
    
    	2. 方法：
    		* reload()	重新加载当前文档。刷新
    	3. 属性
    		* href	设置或返回完整的 URL。

demo

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
    <input type="button" id="btn" value="刷新">
    <input type="button" id="btn2" value="我的博客">
    <script> //reload刷新页面 let btn = document.getElementById("btn") //给btn绑定单击事件 btn.onclick=function (){ //刷新页面 location.reload() } //获取href let href = location.href //弹出获取的内容 alert(href) //跳转 let btn2 = document.getElementById("btn2") //给btn2绑定单击事件 btn2.onclick=function (){ //跳转链接 location.href="https://blog.csdn.net/qq_50216270" } </script>
    </body>
    </html>

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 5]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 6]  
自动跳转demo

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        //设置样式
        <style> //设置p标签样式 p{ text-align: center; } //设置span标签样式 span{ color: red; } </style>
    </head>
    <body>
        <p>
            <span id="time">5</span>秒之后，自动跳转到首页。。。
        </p>
        <script> //设置倒计时秒数 var second=5 //设置倒计时函数 function showTime(){ //每次进入函数都将时间减1s second--; //当时间减完后自动跳转 if(second<=0){ location.href="https://www.baidu.com/" } //根据id获取span标签内容 let time=document.getElementById("time") //用innerHTML更改span内容 time.innerHTML=second+"" } //绑定循环函数，每1s调用一遍函数 setInterval(showTime,1000) </script>
    </body>
    </html>

![在这里插入图片描述][20210615210246304.png]

## 3.History：历史记录对象 ##

1. 创建(获取)：
            1. window.history
            2. history
    
        2. 方法：
            * back()	加载 history 列表中的前一个 URL。
            * forward()	加载 history 列表中的下一个 URL。
            * go(参数)	加载 history 列表中的某个具体页面。
                * 参数：
                    * 正数：前进几个历史记录
                    * 负数：后退几个历史记录
        3. 属性：
            * length	返回当前窗口历史列表中的 URL 数量。

demo

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <input type="button" id="btn" value="获取历史记录">
        <input type="button" id="forward" value="前进">
        <input type="button" id="back" value="后退">
        <script> //通过id获取按钮元素 let btn = document.getElementById("btn") //绑定单击事件的同时获取历史记录长度 let length=btn.onclick=history.length //弹出历史记录长度 alert(length) //根据id获取前进按钮元素 let forward = document.getElementById("forward") //绑定单击事件 forward.onclick=function (){ //调用前进函数 history.forward() //这里和go函数里面传参数1的用法是一样的 //==history.go(1) } //根据id获取back按钮元素 let back = document.getElementById("back") //绑定单击事件 back.onclick=function (){ //调用回退函数 history.back() //这里和go函数里面传参数-1的用法是一样的 //==history.go(-1) } </script>
    </body>
    </html>

效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210615201301798.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210615201305816.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210615201309802.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 3]: /images/20210827/cc7282b6110644f6a2792ce26cca896e.png
[20210615202247715.png]: /images/20210827/e3ca97b9b1504d7a912465b5fd6886f4.png
[20210615201810316.png]: /images/20210827/e9429f81752d4340a46bef8aa7667bfd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 4]: /images/20210827/20161b6953a34b708e74737ccec4f70b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20210615205127837.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 6]: /images/20210827/1531a1e6cd6048a0809390152e4db641.png
[20210615210246304.png]: /images/20210827/94ce852f5bd74d4cb93bf7df74c00eb3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzUwMjE2Mjcw_size_16_color_FFFFFF_t_70 7]: /images/20210827/64842d1d8ea24539a2ba010d0180b06b.png