JavaScript核心之BOM浏览器对象模型

已于 2022-01-23 11:42:07 修改
阅读量233 收藏 1
点赞数 2
分类专栏： # JS+ jQuery 文章标签： javascript 前端 bom
于 2022-01-22 17:21:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45890970/article/details/122640383
版权

BOM浏览器对象模型

1. BOM介绍

概述

在这里插入图片描述

构成

  1. BOM比DOM更大，它包含DOM。
  2. window 对象是浏览器的顶级对象，它具有双重角色。
  • 它是 JS 访问浏览器窗口的一个接口。
  • 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等。
    在这里插入图片描述
    注意：window下的一个特殊属性 window.name

2. window 对象的常见事件

窗口加载事件

在这里插入图片描述
在这里插入图片描述


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // window.onload = function() {
        //     var btn = document.querySelector('button');
        //     btn.addEventListener('click', function() {
        //         alert('点击我');
        //     })
        // }
        // window.onload = function() {
        //     alert(22);
        // }
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })
        window.addEventListener('load', function() {

            alert(22);
        })
        document.addEventListener('DOMContentLoaded', function() {
                alert(33);  //最快
            })
            // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
            // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
    </script>
</head>

<body>

    <button>点击</button>

</body>

</html>

调整窗口大小事件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <script>
        window.addEventListener('load', function() {
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
                console.log(window.innerWidth);

                console.log('变化了');
                if (window.innerWidth <= 800) {
                    div.style.display = 'none';
                } else {
                    div.style.display = 'block';
                }

            })
        })
    </script>
    <div></div>
</body>

</html>

3. 定时器

setTimeout()

在这里插入图片描述
注意：

  • setTimeout() 这个调用函数我们也称为回调函数 callback.，普通函数是按照代码顺序直接调用。而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。简单理解： 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
  • 以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的 函数也是回调函数。
<body>
    <script>
        // 1. setTimeout 
        // 语法规范：  window.setTimeout(调用函数, 延时时间);
        // 1. 这个window在调用的时候可以省略
        // 2. 这个延时时间单位是毫秒 但是可以省略，如果省略默认的是0
        // 3. 这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
        // 4. 页面中可能有很多的定时器，我们经常给定时器加标识符 （名字)
        // setTimeout(function() {
        //     console.log('时间到了');

        // }, 2000);
        function callback() {
            console.log('爆炸了');

        }
        var timer1 = setTimeout(callback, 3000);
        var timer2 = setTimeout(callback, 5000);
        // setTimeout('callback()', 3000); // 我们不提倡这个写法
    </script>
</body>

在这里插入图片描述
在这里插入图片描述

<body>
    <img src="./image/ad.jpg" alt="" class="ad">
    <script>
        var ad = document.querySelector('.ad');
        setTimeout(function() {
            ad.style.display = 'none';
        }, 5000);
    </script>
</body>

clearTimeout()

在这里插入图片描述

<body>
    <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function() {
            console.log('爆炸了');

        }, 5000);
        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })
    </script>
</body>

setInterval()

在这里插入图片描述

<body>
    <script>
        // 1. setInterval 
        // 语法规范：  window.setInterval(调用函数, 延时时间);
        setInterval(function() {
            console.log('继续输出');

        }, 1000);
        // 2. setTimeout  延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
        // 3. setInterval  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
    </script>
</body>

案例
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2022-1-23 00:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            var h = parseInt(times / 60 / 60 % 24); //时
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h; // 把剩余的小时给 小时黑色盒子
            var m = parseInt(times / 60 % 60); // 分
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60); // 当前的秒
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

</html

clearInterval()

在这里插入图片描述

<body>
    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; // 全局变量  null是一个空对象
        begin.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('ni hao ma');

            }, 1000);
        })
        stop.addEventListener('click', function() {
            clearInterval(timer);
        })
    </script>
</body>

案例
在这里插入图片描述
在这里插入图片描述

<body>
    手机号码： <input type="number"> <button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var time = 3; // 定义剩下的秒数
        btn.addEventListener('click', function() {
            btn.disabled = true;
            var timer = setInterval(function() {
                if (time == 0) {
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    time = 3;
                } else {
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);

        })
    </script>
</body>

4. this

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象

  1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
  2. 方法调用中谁调用this指向谁
  3. 构造函数中this指向构造函数的实例

5. JS 执行队列

  1. JavaScript语言的一大特点就是单线程，即同一个时间只能做一件事。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
  2. 为了解决这个问题，利用多核 CPU 的计算能力，HTML5提出 Web Worker 标准，允许 JavaScript 脚本创建多个线程。于是，JS 中出现了同步和异步。
    在这里插入图片描述
    在这里插入图片描述
  3. 执行机制
    在这里插入图片描述
    在这里插入图片描述

6. location 对象

  1. window 对象给我们提供了一个location 属性用于获取或设置窗体的 URL，并且可以用于解析 URL 。 因为这个属性返回的是一个对象，所以我们将这个属性也称为 location 对象。
  2. URL是统一资源定位符，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
    在这里插入图片描述

属性

在这里插入图片描述

案例：5秒钟之后自动跳转页面
在这里插入图片描述

<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
            // console.log(location.href);
            location.href = 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript';
        })
        var timer = 5;
        fn(); //先调用一次 防止刷新时出现空白
        function fn() {
            if (timer == 0) {
                location.href = 'https://developer.mozilla.org/zh-CN/docs/Web/JavaScript';
            } else {
                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }
        }
        setInterval(fn, 1000);
    </script>
</body>

案例
在这里插入图片描述
在这里插入图片描述
index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div></div>
    <script>
        console.log(location.search); // ?uname=andy
        // 1.先去掉？  substr('起始的位置'，截取几个字符);
        var params = location.search.substr(1); // uname=andy
        console.log(params);
        // 2. 利用=把字符串分割为数组 split('=');
        var arr = params.split('=');
        console.log(arr); // ["uname", "ANDY"]
        var div = document.querySelector('div');
        // 3.把数据写入div中
        div.innerHTML = arr[1] + '欢迎您';
    </script>
</body>

</html>

login.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form action="index.html">
        用户名： <input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</body>

</html>

方法

在这里插入图片描述

<body>
    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // 记录浏览历史，所以可以实现后退功能
            //location.assign('https://developer.mozilla.org/zh-CN/docs/Web/JavaScript');
            // 不记录浏览历史，所以不可以实现后退功能
            //location.replace('https://developer.mozilla.org/zh-CN/docs/Web/JavaScript');
            location.reload(true);
        })
    </script>
</body>

7. navigator 对象

  1. navigator对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。
    在这里插入图片描述

8. history 对象

window 对象给我们提供了一个 history 对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的 URL。
在这里插入图片描述
index.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <a href="list.html">点击我去往列表页</a>
    <button>前进</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // history.forward();
            history.go(1);
        })
    </script>
</body>

</html>

list.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <a href="index.html">点击我去往首页</a>
    <button>后退</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            // history.back();
            history.go(-1);
        })
    </script>
</body>

</html>

注意：history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

焦妮敲代码
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript 浏览器对象模型BOM使用介绍
10-24
JavaScript 浏览器对象模型（BOM）是Web开发中不可或缺的一部分，它允许开发者与用户的浏览器进行交互，而不仅仅是操作HTML文档。BOM的核心对象是`window`，它代表了一个浏览器窗口实例，同时也是全局作用域的基底，...
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
10-21
JavaScript中的浏览器对象模型BOM（Browser Object Model）是用于控制浏览器窗口和框架的一种技术。BOM并非是ECMAScript标准的一部分，但其被所有主流的浏览器所支持，它允许JavaScript程序与浏览器窗口进行交互。 ...
BOM 定时器JS执行机制
c_perfectworld的博客
11-21 694
BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口交互的对象 ， 其核心对象是window 由一系列对象构成 ， 并且每个对象都提供了很多方法和属性 把浏览器当成一个对象来看 BOM的顶级对象是window BOM学习的是浏览器窗口交互的一些对象 BOM是浏览器厂商在各自浏览器上定义的 ， 兼容性较差 BOM的构成 window对象是浏览器的顶级对象，具有双重角色 它是js访问浏览器的一个接口 它是一个全局对象 ， 定义在全局作用域的变量 ， 函数都会变成window对象的属性和方法
【DOM BOM】笔记 5 日 BOM浏览器对象模型
林见鹿鸣
12-23 165
1. BOM概述 1.1 什么是BOM BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。 BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。 1.2 BOM的构成 BOM比DOM更大，它包含DOM。 window 对象是浏览器的顶级对象，它具有双重角色
ctrl+f5 强刷新
热门推荐
后台开发
09-18 1万+
某次同学上线了一个服务 ，怎么刷新都不管用，但是又不想清楚浏览器缓存。 F5通常只是刷新本地缓存； Ctrl+F5可以把INTERNET临时文件夹的文件删除再重新从服务器下载，也就是彻底刷新页面了 ...
强制刷新CTRL+F5 和F5 两种刷新有什么区别?
weixin_45797022的博客
08-03 4831
刷新原理不同 F5触发的HTTP请求的请求头中通常包含了If-Modified-Since 或 If-None-Match字段,或者两者兼有； CTRL+F5触发的HTTP请求的请求头中没有上面的那两个头,却有Pragma: no-cache 或 Cache-Control: no-cache 字段,或者两者兼有。 服务器响应不同 F5刷新页面方式服务端返回的是304 Not Modified，这时候浏览器使用本地缓存； CTRL+F5刷新页面的方式，服务器看到发送过来的no-cache请求，就会把最新的文
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
12-13
本文实例讲述了JavaScript 浏览器对象模型BOM原理与常见用法。分享给大家供大家参考，具体如下： 什么是BOM BOM：Browser Object Model，浏览器对象模型 从上图也可以看出： window对象是BOM的顶层(核心)对象，...
F5刷新和Ctrl+F5强制刷新
Kevin yan的专栏
11-18 5763
IE里F5和Ctrl+F5区别一个是刷新，一个是强制刷新 按F5有时候一些内容是不会被更新的，而CTRL+F5则所有内容都会被更新. 具体区别是：F5通常只是刷新本地缓存；Ctrl+F5可以把INTERNET临时文件夹的文件删除再重新从服务器下载，也就是彻底刷新页面了
网页中F5刷新与ctrl + F5强制刷新的区别？
最新发布
crazy_xieyi的博客
09-20 6270
F5只是刷新一次当前页面的资源，使用F5刷新，浏览器仍然会重复利用之前的缓存数据。 使用ctrl+F5进行刷新，这个时候浏览器就不会重复利用之前已经缓存的数据了，而是去清空缓存，把所有的资源进行重新下载，使网页与本机储存的网页时间标记相同。 总结： F5刷新只是请求本地资源重新加载。那么在这个时候，如果在某些业务场景的服务器资源发生了改变，那么这边的本地用户可能某些功能或产品访问不到；​​​​​​​ctrl + F5 是直接请求服务器的资源，让当前页面的资源重新全部从服务器上下载下来，这样就全部更新了。
清理缓存的问题ctrl+F5或者引入外部js的时候?加任意数字
小良的博客
01-13 1002
系列文章目录 文章目录系列文章目录==注意ctrl+F5 连同js一起刷新，这样就不用清理缓存了====还有一种方式：引入外部js的时候?加任意数字，如下== 注意ctrl+F5 连同js一起刷新，这样就不用清理缓存了 我们有时候刷新之后，页面不生效，甚至我们要清理缓存页面才生效 原因是因为 浏览器会缓存js文件，所以我们修改了js后，浏览器默认读取的 还是浏览器缓存的旧的 js，所以我们必须要按Ctrl+F5，连同js一起刷新，或者清除缓存， 以前不懂，所以一直清理缓存，也不知道其中缘由，所以我觉得这个技
ctrl +F5刷新的一个问题
明天的你会感谢今天的自己
09-07 2982
今早上我把eclipse的server启动，并且相关网页（菜单栏所在页面）已经登录成功，突然想起老大让我修改左边菜单栏某个菜单的链接地址，我到数据库找到菜单链接表修改了该选项对应的URL后，到浏览器Ctrl +F5刷新页面，页面报了404： 然后我又F12查看链接，发现链接是我更新的新链接，并且不存在拼写错误： 结果我就蒙比了，链接都是对的，我后台controller拦截的地址也是这个...
js怎么监控键盘事件，js代替ctrl +F5刷新
廖圣平
04-27 8732
首先定义 一个方法     function aa(e){       if(e.keyCode==116){       alert("你点击了F5，即将为你刷新页面");       window.location.reload(true); } }  document.onkeydown = aa; 先定义，当点击键盘的任何按键之后，
定时器函数执行原理揭秘
华的专栏
05-24 6689
我们总是在无法满足条件的时候调用sleep()是系统睡眠，在编写网络程序的时候，总是调用poll、select,想明白内核是如何实现基于精确时间的调度操作吗？或许我们该交流交流... 1 前言 延期执行有两种： 第一种是不需要精确地时间控制，比如软中断和tasklet机制，在每个异步中断处理结束时处理或者调用内核线程          ksoftirqd执行。 第二种需要精确地时间控制，
JavaScript定时器与执行机制解析
初漾的博客
08-06 1659
从JS执行机制说起浏览器（或者说JS引擎）执行JS的机制是基于事件循环。由于JS是单线程，所以同一时间只能执行一个任务，其他任务就得排队，后续任务必须等到前一个任务结束才能开始执行。为了避免因为某些长时间任务造成的无意义等待，JS引入了异步的概念，用另一个线程来管理异步任务。同步任务直接在主线程队列中顺序执行，而异步任务会进入另一个任务队列，不会阻塞主线程。等到主线程队列空了（执行完了）的时候，就会
JavaScript定时器与执行机制
weixin_33890526的博客
08-22 305
　　JavaScript动画中是必须使用到定时器的，这里做一个总结。  var label = 'someLable'; console.time(label); console.timeEnd(label); 　   通过上面的代码，我们可以进行时间统计。 　　 从JS执行机制说起（任务队列） 　　首先，需要知道的是无论是否提到了异步，JavaScript都是单线程的（注意...
BOM - 浏览器对象模型
友人A的博客
08-08 1097
1. BOM概述 1.1 什么是BOM BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。 BOM由一系列相关的对象构成，每个对象都提供了很多方法和属性。 BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。 DOM BOM 文档对象模型 浏览器对象模型 把文档当成一个对象来看待 把浏览器当成一个对象来看待 顶级对象是document 顶级对象是wi
浏览器对象模型BOM深度解析
BOM（浏览器对象模型）是JavaScript与浏览器交互的核心机制，它定义了浏览器窗口、页面元素和用户界面之间的关系。由于没有统一的标准，不同的浏览器可能会有不同的实现，但其基本功能保持一致。 **事件模型和事件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

焦妮敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值