浏览器对象模型BOM

最新推荐文章于 2023-05-07 14:32:43 发布

陈序媛圈圈

最新推荐文章于 2023-05-07 14:32:43 发布

阅读量135

点赞数 1

分类专栏： javascript BOM 文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_44825338/article/details/120658484

版权

javascript 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

BOM

1 篇文章 0 订阅

订阅专栏

BOM（Browser Object Model）：浏览器对象模型。
在这里插入图片描述

实际上就是一些操作浏览器的能力，我们可以获取一些浏览器的相关信息，例如浏览器窗口的大小；操作页面跳转；获取当前浏览器地址栏的信息；操作浏览器的滚动条等。BOM的核心就是window对象，window是浏览器内置的一个对象，里面包含着操作浏览器的方法，用window.方法名()调用方法，window.大多数情况下不写也能调用，但像close、open就必须要有window.才能生效。

一、窗口对象

（一）常用方法
窗口对象的常用方法（二）定时器
1.倒计时定时器
执行完就关闭
setTimeout()倒计时定时器和clearTimeout()关闭定时器
（1）语法：
window.setTimeout(参数1，参数2)
参数1 ：函数
参数2：时间
=》返回定时器对象
（2）示例：
window.setTimeout(function(){
console.log(‘1秒后执行’)
},1000)
2.循环执行定时器
（1）语法：
window.setInterval(参数1，参数2)
参数1 ：函数
参数2：间隔时间
=》返回定时器对象
（2）示例：
window.setInterval(function(){
console.log(‘循环执行定时器’)
},1000)
window.setInterval(参数)
参数：要停止的定时器对象。

应用案例：日期时钟

<!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>
        p {
            font-size: 30px;
        }
    </style>
</head>

<body>
    <p id="timeShow"></p>
    <script>
        //每隔一秒获取一次当前时间并打印
        setInterval(function () {
            var currentTime = new Date()
            var arrTime = []
            arrTime.push(currentTime.getMonth() + 1)
            arrTime.push(currentTime.getDate())
            arrTime.push(currentTime.getHours())
            arrTime.push(currentTime.getMinutes())
            arrTime.push(currentTime.getSeconds())
            arrTime.forEach(function (item, index) {
                if (item < 10) {
                    arrTime[index] = '0' + item
                }
            })
            var strTime =
                `${currentTime.getFullYear()}年${arrTime[0]}月${arrTime[1]}日 ${arrTime[2]}:${arrTime[3]}:${arrTime[4]}`
            document.querySelector('#timeShow').innerHTML = strTime
        }, 1000)
    </script>
</body>

</html>

（三）对话框
1.消息提示框alert()
2.消息确认框confirm()
确定–返回true
取消–返回false
3.内容输入框 prompt()
prompt(‘请输入内容’) – 返回输入内容

（四）浏览器的onscroll事件
onscroll事件浏览器的滚动条滚动时触发的事件
1.获取页面滚动的高度
存在兼容性问题，页面没有声明时，用document.body.scrollTop，有声明时用document.documentElement.scrollTop.
解决兼容性问题：封装一个获取页面滚动高度的函数，两种情况都考虑到：

function getScrollTop(){
    return document.body.scrollTop || document.documentElement.scrollTop
}

2.设置滚动的距离
document.body.scrollTop=距离
解决兼容性问题：没有声明时，document.body.scrollTop为true，有声明时该语句不能被识别，为false。

function getScrollTop(height){
    if(document.body.scrollTop){
        document.body.scrollTop=height
    }else{
        document.documentElement.scrollTop=height
    }                           
}

二、历史记录对象 history

历史记录对象方法

三、位置对象 location

1.location.href 获取当前页面的URL地址
2.location.href=url地址跳转到url地址页面
3.locatio.reload() 重新加载当前文档

陈序媛圈圈

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器对象模型BOM

BOM（Browser Object Model）：浏览器对象模型。实际上就是一些操作浏览器的能力，我们可以获取一些浏览器的相关信息，例如浏览器窗口的大小；操作页面跳转；获取当前浏览器地址栏的信息；操作浏览器的滚动条等。BOM的核心就是window对象，window是浏览器内置的一个对象，里面包含着操作浏览器的方法，用window.方法名()调用方法，window.大多数情况下不写也能调用，但像close、open就必须要有window.才能生效。一、窗口对象（一）常用方法（二）定时器1.倒计时
复制链接

扫一扫

专栏目录