BOM-浏览器对象模型

最新推荐文章于 2024-11-04 14:35:19 发布

小可以o

最新推荐文章于 2024-11-04 14:35:19 发布

阅读量133

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_53149377/article/details/127433522

版权

BOM:Browser Object Model浏览器对象模型，在bom中给我们提供了一整套可以操作浏览器的属性和方法

浏览器的部分（一般都是css不能操作的）

BOM操作中统一语法都是：window.XXX

但是其实一般写代码的时候这个window是可以忽略不写

比如我们之前学习过的了alert这个东西其实是归属于BOM的，标准语法应该是：window.alert()

注意：因为这些东西都是属于浏览器给的，所以就会导致在不同的浏览器上显示的效果可能是不一样的。

浏览器的可视窗口尺寸

可视窗口：就是我们可以看见的区域
获取可视窗口的尺寸
    获取窗口的宽度：window.innerWidth
    获取窗口的高度：window.innerHeight
注意：获取的宽度和高度是包含滚动条在内的
   console.log('窗口的宽度：',window.innerWidth);

浏览器的弹出框

1.提示框：
    语法：window.alert('提示文本')
    表现形式：一个提示文本+一个确定按钮
    返回值：undefined
2.询问框
    语法：window.confirm('提示文本')
    表现形式：一个提示文本+一个确定按钮+取消按钮
    返回值：用户点了确定就返回true，点取消就返回false
3.输入框
    语法：window.prompt('提示文本')
    表现形式：一个提示文本+一个确定按钮+取消按钮+一个文本输入框
    返回值：点了确定返回的就是文本输入框的内容，点了取消返回的就是null
三个框的共同点：都会阻止程序的执行，必须等到用户点了程序才会继续向下执行

浏览器的常见事件

事件一般都是有触发条件，事件名称之前写的时候一般都要加on
浏览器的常见事件
1.load
    语法：window.onload = function(){}
    当触发了load事件之后才会执行function中的代码
    load什么时候触发：当页面中所有的外部资源（html、css、js、图片、视频、音频）
                     全部加载完毕的时候就会自动触发load事件
    使用场景：
        假如你的js代码写在了head标签中了，你还想操作页面元素（标签）
        这个时候因为代码从上到下依次执行，会先执行js
        再执行body中的语句，所以会存在找不见这个标签的风险。
        这个时候我们就只需要加一句：window.onload
        将我们的代码放到load的执行函数中就没有这个问题了
        因为onload会等到页面资源加载完毕之后才会执行。
2.resize
    语法：window.onresize = function(){}
    resize的触发时机：当页面尺寸发生改变的时候就会触发
3.scroll
    语法：window.onscroll = function(){}
    触发时机：当页面的滚动条为止发生改变的时候就触发

浏览器的地址栏

在window之下有一个location对象，这个对象中存储了一些和浏览器地址栏相关的信息
1）window.location.href这是一个可读可写属性
    拿到网址：window.location.href
    设置网址：window.location.href = '新的网址'
    案例：点击一个按钮，切换网址
        1.在js中获取按钮
        2.给按钮绑定一个点击事件
        3.更改网址
<body>
    <button id="btn">点我</button>
</body>
<script>
    var btn = document.getElementById('btn')
    btn.onclick = function () {
        window.location.href = 'http://www.baidu.com'        // 更改网址
    }
</script>
//---------------------------------------------------------------------------
2）reload()
    语法：window.location.reload()
    作用：重新加载页面（其实就是刷新的意思）
    注意：这句话不要放在打开页面就能执行的地方
    案例：
        写一个点击按钮实现刷新的功能
    步骤：
        1.在js中先获取按钮
        2.给按钮绑定点击事件
        3.点击执行执行刷新语句
<body>
    <button id="shuaxin">点我</button>
</body>
<script>
    var shuaxinbtn = document.getElementById('shuaxin')
    shuaxinbtn.onclick = function () {
        window.location.reload()       //刷新页面
    }
</script>

操作浏览器标签页

1)open()
    语法：window.open('地址')
    会以新窗口的方式打开该地址

<body>
    <button id="btn">打开</button>
</body>
<script>
    var btn = document.getElementById('btn')
    btn.onclick = function () {
        // 执行window.open()  点了按钮之后会以新窗口的方式打开百度这个网址
        window.open('http://www.baidu.com')
    }
</script>
//-----------------------------------------------------------------
2)close()
    语法：window.close()
    会关闭当前页面

<body>
    <button id="btn2">关闭</button>
</body>
<script>
    var btn2 = document.getElementById('btn2')
    btn2.onclick = function () {
        window.close()
    }
</script>

浏览器卷去的尺寸

如何获取浏览器卷去的高度(.scrollTop)
    语法1：document.documentElement.scrollTop(html中有doctype标签时用)
    语法2：document.body.scrollTop（html中无doctype标签时用）
    兼容语法：
var scrollTop = document.documentElement.scrollTop ||  document.body.scrollTop
如何获取浏览器卷去的宽度(.scrollLeft)
    语法1：document.documentElement.scrollLeft
    语法2：document.body.scrollLeft
    兼容语法：
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
//什么时候执行？页面滚动的时候就会自动触发
    window.onscroll = function(){
        // 只要页面滚动了，就获取一下页面卷去的宽度
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft
        console.log(scrollLeft);
    }

浏览器的历史记录

操作历史记录：
得有历史记录才可以操作
1）回退：
    语法：window.history.back()
    作用：回到上一个历史记录页面（等价于🔙按钮）
2）前进：
    语法：window.history.forward()
    作用：取到下一个历史记录（等价于→按钮）
3)跳转：
    语法：window.history.go(参数)
    这个参数可以写一个数字
        正整数：就是前进几个页面
        负整数：回退几个页面
        0：跳转到本页面，其实就是刷新

设置滚动条的滚动距离

写参数的方案1：传递数字
    语法1：window.scrollTo(x，y)
        x：横向的卷去的尺寸
        y：纵向卷去的尺寸
    注意：
         1.他是瞬间滚动，没有动画效果
         2.必须传递2个数字，1个不行
写参数的方案2：传递一个对象
     语法2：window.scrollTo({left:？,top:？,behavior:'smooth'})
        left:横向卷去的尺寸
        top:纵向卷去的尺寸
        想设置谁就设置谁
        还可以在对象中写第三条属性，比如写一个behavior将值设置位smooth，这样就可以有平滑滚动的效果