BOM：浏览器对象模型

憨憨404

已于 2022-12-09 11:39:15 修改

阅读量291

点赞数

分类专栏： JS基础文章标签：前端

于 2022-12-08 20:21:52 首次发布

本文链接：https://blog.csdn.net/qq_60839348/article/details/128242336

版权

JS基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

BOM的全称browser object mode

css不可调整的一般都是浏览器的部分，比如：浏览器的滚动条、地址栏、关闭按钮、刷新按钮。

BOM可以操作浏览器：

1.弹出框

//提示框

// window.alert()

//输入框

// window.prompt()

//询问框：返回值确定true，取消false

// window.confirm()

    <script>
        /* 
        操作浏览器的统一语法都是window.XXX
        但是我们window其实是可以忽略不写的。

            只要能在浏览器中弹出一个框，统一都叫做弹出框
            1.提示框：alert('提示文本')的标准语法是：window.alert()
                弹出一个提示框
                表现形式：一个提示文本+确定按钮
                返回值：undefined
            2.输入框：window.prompt('提示文本')
                表现形式：一个提示文本+一个输入框+一个确定按钮+取消按钮
                返回值：当点击确定的时候返回值就是用户的输入的内容，当点击取消按钮的时候返回值是null
            3.询问框：window.confirm('提示文本')
                表现形式：一个提示文本+一个确定按钮+一个取消按钮
                返回值：当点击确定的时候返回true，当点击取消的时候返回false。

        */

    //    var res =  window.alert('哈哈哈')
    //    console.log(res);
    </script>

2.得到浏览器可视窗口的尺寸

    /* 浏览器的可视窗口：注意：获取的宽度和高度是包含滚动条在内的。 */

            //获取浏览器宽度
            // window.innerWidth()
            // console.log(window.innerWidth);

            //获取浏览器高度
            // window.innerHeight()

3.事件：

load（都加载完再执行），

resize（页面尺寸变化会触发），

scroll（页面滚动条发生变化触发）

   <script>
        /* 
            事件：只要是事件都有自己特定的触发条件
            1.load事件：当页面中所有的外部资源（html文件、css文件、图片、视频、音频）全部加载完毕才会执行load事件，什么时候资源加载完毕什么时候自动触发load事件。
                语法：window.onload = function(){
                    代码
                }
            2.resize事件：当页面的尺寸发生改变的时候就触发
                语法：window.onresize = function(){

                }
                只要页面尺寸发生改变，就会自动执行function中的代码
            3.scroll事件：当页面滚动条位置发生改变的时候就触发
                 语法：window.onscroll = function(){

                }
                只要滚动条动了，就会执行function中的代码
            注意：写事件的时候，事件名称前面要加on
        */
        // 等所有的外部资源加载完毕才会执行123
        // window.onload = function () {
        //     console.log('123');
        // }
        

        // 2

        // window.onresize = function(){
        //     console.log('改变了');
        // }

        // 3
        window.onscroll = function(){
            console.log('滚动了');
        }

    </script>

4.浏览器地址栏：location

页面跳转：href 刷新：reload

<body>
    <button id="btn">点我</button>
    <button id="btn2">新刷</button>
    <script>
        /* 
        1.href
            在window内有一个location属性，他是一个对象数据类型，里面存储了一些和地址栏相关的信息。
            window.location.href:单独拿到网址。
            window.location.href = '网址'==重新给href进行复制操作，可以实现达到网页跳转的效果，在本窗口跳转。
            按钮：实现点击按钮跳转到百度
        */
        //    console.log(window.location);
        //    console.log(window.location.href);
        //    window.location.href = 'http://www.baidu.com'


        var btn = document.getElementById('btn')
        btn.onclick = function(){
            window.location.href = 'http://www.baidu.com'
        }

        // 2.reload()===重新加载，其实就是刷新的意思
        // 语法:window.location.reload()

        // 案例：模仿刷新按钮，当点击按钮执行实现刷新的效果
        var btn2 = document.getElementById('btn2')
        btn2.onclick = function(){
            window.location.reload()
        }
       
    </script>
</body>

5.浏览器的标签页打开和关闭：open（）；close（）

<body>
    <button id="btn1">打开</button>
    <button id="btn2">关闭</button>
    <script>
        /* 
            1.open()打开一个新的标签页,打开新的标签页的时候可以给一个网址，从而实现网页跳转效果。
                语法：window.open('地址')

                案例：当点击一个按钮的时候打开一个新的标签页，
            2.close()：关闭标签页面
                语法：window.close()

                案例：点击一个按钮，关闭当前页面
        */
        var btn1 = document.getElementById('btn1')
        btn1.onclick = function(){
            window.open('http://www.baidu.com')
        }

        var btn2 = document.getElementById('btn2')
        btn2.onclick = function(){
            window.close()
        }

    </script>

6.浏览器页面卷去的尺寸（推荐兼容写法）:

    /* 浏览器卷去的尺寸 */
        // 必须有   '<!DOCTYPE html>'
        // console.log(document.documentElement.scrollTop);
        // console.log(document.documentElement.scrollTop);
        // 没有 '<!DOCTYPE html>'
        // console.log(document.body.scrollTop);
        // console.log(document.body.scrollTop);

得到兼容写法：

    <script>
        
    // 两者都满足 保证永远有结果
        // 纵向卷去尺寸
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        console.log(scrollTop)
        // 横向卷去尺寸
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
        console.log(scrollLeft)

    </script>

7.历史记录 history（），实现，页面跳转（上一页，下一页），刷新：

<body>

    页面1 
    <a href="2.html">去到页面2</a>
    <button id="forward">前进</button>
    <script>
        /* 
            研究历史记录其实就是模仿浏览器上的前进和回退按钮
            要求的前提是：页面必须有历史记录才行

            模仿前进和回退
            当点击前进按钮的时候需要去到2页面
             前进：window.history.forward()
             回退：window.history.back()
             去到指定的历史记录的页面：window.history.go(数字)
                写数字0：去到本页面，其实刷新的意思
                写正整数：比如写的是1，意思就是前进1页，写的是2，意思就是前进2页
                写负整数：比如写的是-1，意思就是回退1页，写的是-1，意思就是回退2页
        */
       var forward = document.getElementById('forward')
       forward.onclick = function(){
            // 去到下一个页面
            // window.history.forward()
            window.history.go(1)
            // 去到前2个页面
            window.history.go(-2)
            // 刷新页面
            window.history.go()
       }
    </script>
</body>

8.浏览器回到顶部（或者别的位置）：

window.scrollTo({left:0,top:0,behavior:"smooth"})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            position: relative;
            height: 3000px;
            width: 3000px;
        }
        button{
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 100px; 
            height: 100px;
            line-height: 100px;
            background-color: aquamarine;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <button id="top">回到顶部</button>

    <script>
        /* 
            让浏览器滚动到某一个位置。
            可以模拟一键回到顶部的效果
            语法：
                window.scrollTo(参数)
                参数写法一：
                    window.scrollTo(x,y)
                    你写的第一个数字就代表横向的位置
                    你写的第二个数字就代表纵向的位置
                    注意：2个数字，横向位置和纵向位置都必须写，并且没有平滑的滑动效果
                参数写法二：
                    window.scrollTo({left:XXX,top:XXX,behavior:'smooth'})
                        动横向就写left
                        动纵向就写top
                        2个都想操作left和top都写
                        并且可以添加平滑滑动的效果’
                        behavior:'smooth':平滑效果
        */

        // var btn = document.getElementById('btn')
        // btn.onclick = function(){
        //     window.scrollTo(0,0)
        // }
        var top = document.getElementById('top')
        top.onclick = function(){
            window.scrollTo({left:0,top:0,behavior:"smooth"})
        }

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