JavaScript-BOM浏览器对象模型

最新推荐文章于 2024-05-20 22:38:25 发布

qq_52822043

最新推荐文章于 2024-05-20 22:38:25 发布

阅读量175

点赞数

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/qq_52822043/article/details/123720485

版权

1. BOM概述

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象时window。

BOM有一些列相关的对象构成，并且每个对象都提供了很多方法与属性。

BOM缺乏标准，JavaScript语法的标准化组知识ECMA，DOM的标准化组知识W3C，BOM最初是NetSpace浏览器标准的一部分。

BOM的构成

window对象是浏览器的顶级对象，它具有双重角色。

它是JS访问浏览器窗口的一个接口
它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用方法的时候可以省略window，eg.对话框都属于window对象方法，如alert()、prompt()等

2. window对象的常见事件

1）窗口加载事件

window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数。

注意：

有了 window.onload就可以把JS代码写到页面元素的上方，因为onload是等页面内容全部加载完毕，再去执行处理函数
window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准
如果使用addEventListener则没有限制

DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等
IE9以上才支持
如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，交互效果就不能实现，必然影响用户的体验，此时用DOMContentLoaded时间比较合适

    <script>
        //1.onload是等页面内容全部加载完毕，再去执行处理函数
        //2.window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准
        window.onload = function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击了按钮');
            });
        }
         window.addEventListener('load', function() {
            alert(222);
        });
        //DOMContentLoaded:仅当DOM加载完成,不包括样式表，图片，flash等等就可以执行,速度比load快
        document.addEventListener('DOMContentLoaded', function() {
            alert(111);
        })
    </script>
</head>
<body>
    <button>点击</button>
</body>

结果为：

2）调整窗口大小事件

window.onresize是调整窗口大小加载事件，当触发时就调用的处理函数
只要窗口大小发生像素变化，就会触发这个事件
经常利用这个事件完成响应式布局，window.innerWidth：当前屏幕的宽度

3. 定时器

1）setTimeout()定时器

用于设置一个定时器，该定时器在定时器到期后执行调用函数。

setTimeout()这个调用函数也称为回调函数callback。

普通函数是按照代码顺序直接调用的，但是这个函数需要等待时间，时间到了采取调用这个函数，因此称为回调函数。也就是上一件事干完，再回头调用这个函数。

window可以省略
这个调用函数可以直接写函数，或者写函数名，或者采取字符串'函数名()'三种形式
延迟的毫秒数省略的话默认是0，如果有的话必须是毫秒
因为定时器可能有很多，所以经常给定时器赋值一个标识符

   <script>
        //setTimeout()定时器
        //1.window可省略
        //2.延迟的单位是毫秒
        //3.可以直接写函数
        setTimeout(function() {
            console.log();('延迟2000ms后弹出');
        }, 2000)
        //也可以写函数的名字
        // setTimeout(delay,3000);
        // function delay() {
        //     console.log('延迟3000ms后弹出');
        // }
    </script>

结果为：

2）停止 setTimeout()定时器

取消了先前通过调用 setTimeout()建立的定时器。

window可以省略
里面的参数就是定时器的标识符

<body>
    <button>点击停止定时器</button>
    <script>
        var timer = setTimeout(function() {
            alert('延迟2000ms后弹出');
        }, 2000);

        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
        //停止setTimeout()定时器
            clearTimeout(timer);
        })

    </script>
</body>

结果为：当点击了按钮之后，不会弹出警告框

3）setInterval()定时器

重复调用一个函数，每隔这个时间，就去调用一次回调函数。

window可以省略
这个调用函数可以直接写函数，或者写函数名，或者采取字符串'函数名()'三种形式
间隔的毫秒数省略的话默认是0，如果写必须是毫秒，表示每隔多少毫秒就自动调用这个函数
因为定时器可能有很多，所以经常给定时器赋值一个标识符

<body>
    <script>
        //setInterval()定时器
        //重复调用一个函数，每隔1000ms，就去调用一次回调函数，会调用很多次
        setInterval(function(){
            console.log('继续输出');
        },1000);
    </script>
</body>

结果为：

4）停止setInterval()定时器

取消了先前通过调用 setInterval()建立的定时器。

window可以省略
里面的参数就是定时器的标识符

<body>
    <button class="start">开启定时器</button>
    <button class="end">停止定时器</button>
    <script>
        //setInterval()定时器
        //重复调用一个函数，每隔1000ms，就去调用一次回调函数，会调用很多次
        // setInterval(function(){
        //     console.log('继续输出');
        // },1000);
        var start = document.querySelector('.start');
        var end = document.querySelector('.end');
        //声明全局变量
        var timer = null;
        start.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('开启定时器');
            },1000);
        });
        end.addEventListener('click', function() {
            //为了便于clearInterval()能够访问timer，所以timer应该设置为全局变量
            clearInterval(timer);
        });
    </script>
</body>

结果为：当按下开启定时器按钮则会每隔1000ms输出，按下结束定时器按钮则会结束输出

5）this

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

全局作用域或者普通函数中this指向全局对象window，定时器里面的this也是指向window
方法调用中谁调用this就指向谁
构造函数中this指向构造函数的实例

<body>
    <button>点击</button>
    <script>
        //1.全局作用域或者普通函数中this指向全局对象window，定时器里面的this也是指向window
        console.log(this);

        function fn() {
            console.log(this);
        }
        window.fn();

        window.setTimeout(function() {
            console.log(this);
        });

        //2.方法调用中谁调用this就指向谁
        var o = {
            sayHi: function() {
                console.log(this); //this指向的是o这个对象
            }
        }
        o.sayHi();  //指向window

        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            console.log(this);  //指向btn这个对象
        });

        //3.构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); //指向fun实例对象
        }
        var fun = new Fun(); 
    </script>
</body>

结果为：

4. JS执行机制

JavaScript语言是单线程的，也就是说，同一个时间只能做一件事。

1）同步与异步

同步：前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

异步：在做一件事情时，因为这件事情会花费很长时间，所以在做这件事的同时还可以去处理其他的事情。

本质区别：这条流水线上各个流程的执行顺序不同。

同步任务：都在主线程上执行，形成一个执行栈。

异步任务：是通过回调函数实现的。异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）。

一般而言，异步任务有以下三种类型：

普通事件，如click、resize等
资源加载，如load、error等
定时器，包括setInterval、setTimeout等

2）JS执行机制

先执行执行栈中的同步任务
异步任务（回调函数）放入任务队列中
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行

由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（event loop）。

5. location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。因为这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

1）URL

统一资源定位符（URL）是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

URL的一般语法格式为：

2）location对象的属性

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);
        })
        var time = 5;
        setInterval(function() {
            if(time == 0) {
                location.href = 'https://www.baidu.com';
            }
            else {
                div.innerHTML = '页面将在' + time + '秒之后跳转到百度首页';
                time--;
            }
        },1000);
    </script>
</body>

结果为：

3）location对象的方法

6. navigator对象

navigator对象包含有关浏览器的信息，它有很多属性，最常用的是userAgent，该属性可以返回由客户机发送服务器的user-agent头部的值。

下面前端代码可以判断用户哪个事件终端打开页面，实现跳转

7. history对象

window对象提供了一个history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。

qq_52822043

关注

0
点赞
踩
0

收藏

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

1. BOM概述BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象时window。BOM有一些列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM缺乏标准，JavaScript语法的标准化组知识ECMA，DOM的标准化组知识W3C，BOM最初是NetSpace浏览器标准的一部分。BOM的构成window对象是浏览器的顶级对象，它具有双重角色。它是JS访问浏览器窗口的一个接口它是...
复制链接

扫一扫