BOM基础

最新推荐文章于 2024-08-22 14:32:34 发布

啊俊仔

最新推荐文章于 2024-08-22 14:32:34 发布

阅读量68

点赞数 1

分类专栏：从零开始学习js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45614773/article/details/128620831

版权

从零开始学习js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

BOM（BrowserObjectModel）允许JavaScript与浏览器窗口进行交互。window对象是BOM的核心，它是全局作用域，拥有如innerHeight/Width,outerHeight/Width等属性，以及resize事件。窗口大小改变时，会触发resize事件。location对象用于页面跳转和重新加载，history对象则提供浏览器会话历史的操作，如模拟回退按钮。

摘要由CSDN通过智能技术生成

什么是BOM?

（Browser Object Model，浏览器对象模型），是js与浏览器窗口交互的接口

BOM常用对象

window对象

window对象就是当前js脚本运行所处的窗口

<body>
    <script>
        var a = '哟，小伙砸来学习哇👍';
        // window.hasOwnProperty-检查对象的自有属性
        console.log(window.hasOwnProperty('a'));
        confirm(a);
    </script>
</body>

请添加图片描述

同一个窗口的标签页之间不会共享一个window对象（每个窗口有一个window对象

多个js文件之间共享全局作用域（全局变量会成为window对象的属性

one.html中

<!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>
</head>

<body>
</body>
<script src="/1.js"></script>
<script src="/2.js"></script>
</html>

1.js中

var num = 1;

2.js中

num++;
confirm('我要吃' + num + '个鸡腿🍗');

在这里插入图片描述

窗口尺寸相关属性

属性	说明
innerHeight	浏览器窗口的内容区域的高度，包含水平滚动条（若有的话
innerWidth	浏览器窗口的内容区域的宽度，包含垂直滚动条（若有的话
outerHeight	浏览器窗口的外部高度
outerWidth	浏览器窗口的外部宽度
获得不包含滚动条的窗口宽度document.documentElement.clientWidth

resize事件

窗口大小改变后，会触发resize事件
绑定事件处理函数

<!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>
</head>
<style>
    body {
        height: 3000px;
        background-image: linear-gradient(to bottom, pink, white);
    }
</style>
<body>
    <script>
    // 监听窗口尺寸事件
    window.onresize = function(){
        // 获取当前窗口
        var w = document.documentElement;
        // w.clientWidth,w.clientHeight --> 宽，高
        console.log("窗口变大变小buibui!",w.clientWidth,w.clientHeight);
    };
    </script>
</body>
</html>

在这里插入图片描述

请添加图片描述

窗口卷动高度
- 什么是窗口卷动高度？
获取窗口卷动高度

 <script>
        // 只读
        console.log(window.scrollY);
        // 可修改窗口卷动高度
        console.log(document.documentElement.scrollTop);
    </script>

在这里插入图片描述
进度条下拉，并F5刷新

修改窗口卷动高度

document.documentElement.scrollTop = 0

在这里插入图片描述

scroll事件（在窗口被卷动之后，触发scroll事件

绑定事件处理函数

 <script>
        window.onscroll = function(){
            // window.scrollY 卷动高度
            console.log('窗口卷动啦',window.scrollY);
        };
    </script>

拉动进度条👇
请添加图片描述

screen对象（主要用来获取用户的屏幕信息
document对象（是window对象的一个属性，可以用来处理页面文档

location对象（标识当前所在网址，可以通过给这个属性赋值命令浏览器进行页面跳转

实现页面跳转的两种写法

window. Location='网址';
window.location.href='网址';

重新加载当前页面

调用location的reload方法以重新加载当前页面，参数true表示强制从服务器强制加载

<body>
    <button id="btn">刷新</button>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            window.location.reload();
        };
    </script>
</body>

get请求查询参数

console.log(window.location.search);

在这里插入图片描述

navigator对象(内部含有用户此次活动的历览器的相关属性和标识

appName-浏览器官方名称
appVersion-浏览器版本
userAgent-浏览器的用户代理(含有内核信息和封装壳信息
platform-用户操作系统

    <script>
        console.log('浏览器品牌',navigator.appName);
        console.log('浏览器版本',navigator.appVersion);
        console.log('操作系统',navigator.platform);
        console.log('用户代理',navigator.userAgent);
    </script>

在这里插入图片描述

history对象(提供了操作浏览器会话历史的接口

常用操作-模拟浏览器回退按钮

one.html中

<body>
    <a href="/two.html">上two.html康康😼</a>
</body>

two.html中

<body>
    <h1>什么也没有，略略略🐱</h1>
    <!-- 返回上一页的三种方法 -->
    <!-- 方法1和2用这个👇 -->
    <button id="back">回去吧1&2</button>
    <!-- 方法3👇 -->
    <a href="javascript:history.back;">回去吧3</a>

    <script>
        var back = document.getElementById('back');
        back.onclick = function() {
            // 方法1
            // back上一页，forward下一页
            history. Back();
            // 方法2
            // go()参数：-1返回上一页；1下一页
            // history.go(-1);
        };
    </script>
</body>