当前位置：首页 > 教程 > 正文内容

BOM的对象-JavaScript对象模型

唐朝2年前 (2024-03-19)教程712

学习BOM对象的常见属性，知道BOM对象的功能含义。

一、BOM概括

BOM（Browser Object Model，浏览器对象模型）是JavaScript中与浏览器交互的一组API，它提供了对浏览器窗口、历史记录、导航信息、屏幕尺寸以及文档对象等的访问和控制能力。以下是五个主要的BOM对象简要概括：

document（文档对象）：操作和访问当前HTML文档的接口，包含获取、修改元素及属性的方法。

location（位置对象）：提供当前页面URL信息，并允许进行页面导航操作。

navigator（导航器对象）：提供浏览器及其环境信息的对象。

screen（屏幕对象）：表示用户屏幕详细信息的对象。

history（历史对象）：用于控制浏览历史记录的对象。

二、window对象

window对象是一个全局对象，也可以说是JavaScript中的顶级对象。

//window.属性名 = "属性值";
window.alert('提示信息')
window.confirm("确认信息")
window.prompt("弹出输入框")
window.open("url地址",'打开的方式（可以是-self或-black）','新窗口的大小'）;
window.close(); //关闭当前的网页。 注：存在兼容性问题
window.moveTo(); //移动当前窗口(了解)注：存在兼容性问题
window.resizeTo(); //调整当前窗口的尺寸
window.setTimeout(函数,时间) //只执行一次
window.setInterval(函数,时间) //无限执行
window.clearTimeout/window.clearInterval(定时器名称) //清除定时器

2-1：案例（消失的留言）

消失的留言 - 实践

2-2：案例（阅读进度）

需求：显示观看了百分比

分析：

1、监听窗口滚动事件

2、计算阅读进度

代码案例

<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅读进度</title>
    <link rel="stylesheet" href="https://www.ytwes.com/assets/css/case.min.css">
    <script>
        // 监听窗口滚动事件
        window.addEventListener("scroll", function () {
            const pageHeight = document.documentElement.scrollHeight;   // 获取整个文档的总高度，包括未滚动到视口的部分
            const viewportHeight = window.innerHeight;                  // 获取浏览器窗口内部的高度（即视口高度）
            const scrollPosition = window.scrollY + viewportHeight;     // 计算当前滚动位置加上视口高度，得到已滚动区域和可见区域相加的总高度
            // 计算已滚动部分相对于整个页面高度的百分比，并使用Math.min限制最大值为100%
            const scrollPercentage = Math.min(Math.round(scrollPosition / pageHeight * 100), 100);
            const lazyNumElement = document.querySelector('.lazynum');  // 获取class为'lazynum'的元素
            lazyNumElement.innerHTML = `${scrollPercentage}%`;          // 将计算好的滚动百分比以字符串形式赋给该元素的innerHTML属性，显示在页面上
        });
    </script>
</head>

<body>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div class="lazynum" title="阅读进度"></div>
</body>

</html>

三、document对象

代表当前HTML文档，提供了操作和遍历HTML元素的方法，如getElementById(), querySelector(), querySelectorAll()等，可以用来获取页面上的元素。

还可以通过innerHTML, textContent等属性修改或读取元素内容。

3-1：案例（你去哪了）

需求：页面不可见状态时改变当前浏览器标签页的标题

分析：

1、通过visibilitychange监听浏览器事件

2、document.hidden判断是否被隐藏

代码案例

// 获取当前文档标题
var pageTitle = document.title;
// 监听文档可见性变化事件
document.addEventListener("visibilitychange", function () {
    // 当文档被隐藏时，将标题修改为"1123"
    if (document.hidden) {
        document.title = "(●—●)啊，你去哪了！";
    } else {
        // 当文档重新变为可见状态时，将标题修改为"4444"
        document.title = "(/≧▽≦/)咦！你没走啊！";
        // 在800毫秒后将标题还原为之前的值
        setTimeout(function () {
            document.title = pageTitle;
        }, 800);
    }
});

四、location对象

表示当前窗口加载的网页URL信息。

可以通过location.href来获取或设置完整的URL地址。

使用location.search访问查询字符串参数，location.hash访问哈希值，以及location.pathname获取路径名等。

支持方法如assign(), reload(), replace()用于导航到新URL或重新加载页面。

 //location对象：浏览器当前URL信息。
 //对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
 window.location 对象在编写时可不使用 window 这个前缀。 一些例子：
 location.herf = 'url地址'
 location.hostname //返回 web 主机的域名
 location.pathname /返回当前页面的路径和文件名
 location.port //返回 web 主机的端口 （80 或 443）
 location.portocol //返回页面使用的web协议。 http:或https:
 // 重要的API：
 location.reload(); // 重新加载当前页面
 location.assign("url地址"); // 转到新的 URL，保留当前页面历史记录
 location.replace("url地址");    // 转到新的 URL，并替换当前页面在浏览器历史记录中的位置

4-1：案例（跳转到站点）

<!DOCTYPE html>
<html lang="zh-Hans">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, user-scalable=no">
        <title>跳转中 - 猫贝导航</title>
        <style>
        body{margin:0;padding:0}
        .goto-page{-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;display: -webkit-box;display: -ms-flexbox;display: flex;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: #e8eaec;}
        .goto-content{position: absolute;top: 20%;padding: 0 10px;max-width: 580px;z-index: 999;}
        .goto-logo{text-align: center;}
        .goto-logo img{width: 200px;height: auto;margin-bottom: 20px;}
        .goto-loading{padding: 20px;background: #fff;border-radius: 10px;box-shadow: 0 15px 20px rgb(18 19 20 / 10%);}
        .goto-tips{background: rgb(88 216 255 / 10%);border-radius: 6px;padding: 10px 20px;font-size: 16px;font-weight: 400;color: #222226;line-height: 28px;}
        .goto-info{margin-top: 20px;padding-top: 15px;border-top: 1px solid rgba(136,136,136,.2);font-size: 14px;word-break: break-all;text-align: center;}
        .goto-info a{text-decoration: none;color: #0188fb;}
        .num{color: #f70808;}
        </style>
    </head>
    <body>
        <div class="goto-page">
            <div class="goto-content">
                <div class="goto-logo">
                    <img src="https://www.ytwes.com/zb_users/theme/tpure/style/images/logo.svg" alt="前端开发">
                </div>
                <div class="goto-loading">
                    <div class="goto-tips">您即将离开本站，并前往192.168.11.10 ，该网站不属于本站页面，我们无法确认该网页是否安全，请注意保护您的账号和财产安全</div>
                    <div class="goto-info">
                        <span>正在进入：</span>
                        <a href="http://192.168.11.10">192.168.11.10 </a>
                        <span class="num">99秒</span>
                    </div>
                </div>
            </div>
        </div>

        <script>
            // 1、获取元素
            const a = document.querySelector('.num')
            // 2、开启定时器
            let num = 99
            let timerID = setInterval(function () {
                num--
                if (num > 0) {
                    a.innerHTML = `${num}秒`
                }
                if (num === 0) {
                    clearInterval(timerID)
                    location.href = 'http://192.168.11.10'
                }
            }, 1000)
        </script>

    </body>
</html>

五、navigator对象

描述了浏览器的信息，包括用户代理、平台、插件、语言等。

常用于检测用户的浏览器类型和版本，例如：navigator.userAgent返回包含浏览器详细信息的字符串。

不过现代JavaScript编程更倾向于功能检测而非UA字符串嗅探，因为后者容易导致错误判断。

 //Navigator对象：浏览器本身信息。
 //window.navigator对象包含有关访问者浏览器的信息。在编写时可不使用 window 这个前缀。
 navigator.platform//操作系统类型
 navigator.userAgent//浏览器设定的User-Agent字符串(重要)。最常用的属性，用来完成浏览器判断
 navigator.appCodeName//浏览器代号
 navigator.appName//浏览器名称
 navigator.appVersion//浏览器版本
 navigator.language//浏览器设置的语言
 navigator.systemLanguage//浏览器系统语言
 navigator.cookieEnabled//浏览器是否启用了cookie

5-1：案例（手机端跳转）

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, user-scalable=no">
    <title>手机端跳转</title>
</head>
<body>
    <script>
        // 使用立即执行的匿名函数封装检测逻辑
        !(function () {
            // 获取浏览器的userAgent字符串，包含浏览器类型、版本等信息
            const userAgent = navigator.userAgent
            // 验证是否为Android设备，正则表达式匹配Android标识和版本号
            const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)/)
            // 验证是否为iPhone设备，正则表达式匹配iPhone OS标识和版本号
            const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
            // 如果是Android或iPhone设备，则跳转至移动站点
            if (android || iphone) {
                // 重定向到指定的移动站点URL
                location.href = 'http://www.ytwes.com'
            }
        })()
    </script>
</body>
</html>

六、screen对象

包含有关用户屏幕的信息，如宽度、高度、颜色深度等。

属性如screen.width, screen.height分别提供可视区域的宽度和高度，screen.availWidth和screen.availHeight则提供可用工作区的大小。

//screen对象：客户端屏幕信息。
screen.availWidth//属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
screen.availHeight//属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

七、history对象

提供了对浏览器历史记录的访问，允许后退、前进以及跳转到指定索引处的历史条目。

方法如history.back(), history.forward(), history.go()分别对应浏览器的后退、前进和直接跳转至某个位置的功能。

history.length//属性返回浏览器历史列表中的 URL 数量。
history.back()//加载历史列表中的前一个 URL。返回上一页。
history.forward()//加载历史列表中的下一个 URL。返回下一页。
history.go(-1)//负数时返回上一页，正数时返回下一页，

注意：出于安全原因，不能直接访问历史记录中的具体URL。

文档如有描述不清楚、错误或者过时的地方，欢迎留言指出。

文档、教程内容会不定时更新，转载请标明原帖链接，以免让过时的教程流入网络。

分享给朋友：

返回列表

没有更早的文章了...

下一篇：DOM的对象-JavaScript对象模型

“BOM的对象-JavaScript对象模型” 的相关文章

mouse事件（鼠标事件）- JavaScript事件处理

mouse（鼠标）事件主要是操作鼠标所触发的事件，如单击、双击、鼠标离开等。由于在Windows系统中鼠标是最主要的定位设置，所以鼠标事件是Web开发中最常用的一类事件。请注意：此类事件不仅可能来自于“鼠标设备”，还可能来自于对此类操作进行了模拟以实现兼容性的其他设备，例如手机和平板电脑。1、鼠标事...

课程简介

本课程通过实践操作为导向，带领学生们逐步学习并掌握Web前端开发技术。我们选择了一些基础的实践项目作为教学案例，旨在让学生们通过真实的项目实践，深入理解并熟练运用HTML、CSS和JavaScript等前端技术，从而构建出功能完善、界面美观的网页。课程内容与特色l 从零开始，逐...