JavaScript BOM浏览器对象模型

BOM概述

BOM即浏览器对象模型它提供了独立于内容而与浏览器窗口进行交互的对象其核心是window

BOM由一系列相关对象构成并且每个对象提供了很多方法和属性

DOM:

文档对象模型

DOM就是把文档当做一个对象来看待

DOM的顶级对象是document

DOM主要是操作页面元素

DOM是W3C标准规范

BOM:

浏览器对象模型

把浏览器当做一个对象来看

BOM的顶级对象是window

BOM是浏览器窗口交互的一些对象

BOM是浏览器厂商在各自浏览器上定义的兼容性较差

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

1.它是JS访问浏览器窗口的一个接口

2.它是一个全局对象定义在全局作用域中的变量函数都会变成window对象的属性和方法

但是在调用的时候可以省略window.

window对象的常见事件

窗口加载事件

window.onload = function()

或者

window.addeventListener('load',function())

当文档的内容全部加载完成会触发该事件(包括图像脚本文件 CSS文件等),调用处理函数.

还有一个比较相似的

document.addEventListener('DOMContentLoaded',function())

这个是仅仅当DOM加载完毕不包括样式图片 flash等IE9以后支持如果图片比较多体验比较好

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        window.onload = function () {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function () {
                alert('点我');
            })
        }
        window.addEventListener('load', function () {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function () {
                alert('哈哈');
            })
        })
        window.addEventListener('DOMContentLoaded', function () {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function () {
                alert('嘿嘿');
            })
        })
        //注意:
        // 有了window.onload 就可以把js代码写到页面元素的上方 因为onload就是等页面元素全部加载完才触发的。
        // window.onload传统注册事件方式只能写一次 如果有多个 会以最后一个为准
        // 使用addEventListener(没有限制
        // load 等页面内容全部加载完毕 包含dom元素 样式 图片 flash等
        // DOMContentLoaded 是DOM加载完毕 不包含图片 flash css等 比较快
    </script>
    <button>点击</button>
</body>

</html>

调整窗口大小事件

window.onresize = function()

或者

window.addEventListener('resize',function(){})

注意:

只要窗口大小放生变化就会触发这个事件

我们可以利用这个事件完成响应式布局 window.innerWidth当前屏幕的宽度

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>123</div>
    <script>
        var div = document.querySelector('div');
        window.addEventListener('resize', function () {
            console.log('变化了');
            if (window.innerWidth <= 800) {
                div.style.display = 'none';
            }
        })
    </script>
</body>

</html>

定时器

window对象给我们提供了2个非常好用的定时器

setTimeout()

setInterval()

window.setTimeout('调用函数',[延迟的毫秒数])

setTimeout()方法用于设置一个定时器该定时器在定时器到期后执行调用函数

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // window.setTimeout('调用函数',[延迟的毫秒数])
        // setTimeout()方法用于设置一个定时器 该定时器在定时器到期后执行调用函数
        // 如果毫秒省略默认为0
        // 这个调用函数可以直接写函数 还可以写函数名
        // 页面中可能有很多定时器 我们经常给定时器添加标识符
        setTimeout(function () {
            console.log('两秒后输出');
        }, 2000)

        function callback() {
            console.log('时间到了');
        }
        setTimeout(callback, 3000);
        //添加标识符
        var time1 = setTimeout(callback, 4000);
        var time2 = setTimeout(callback, 5000);
    </script>
</body>

</html>

停止setTimeout()定时器

window.clearTimeout(timeoutID);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>清除定时器</button>
    <script>
        var time = setTimeout(function() {
            console.log('定时器');
        },5000)
        var btn = document.querySelector('button');
        btn.addEventListener('click',function() {
            window.clearTimeout('time');
        })
    </script>
</body>
</html>

setInterval()定时器

window.setInterval(回调函数,[间隔的毫秒数]);

setInterval()方法重复调用一个函数每隔这个时间就去调用一次回调函数

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var num = 0;
        var timer = setInterval(function () {
            num += 1;
            if (num <= 6) {
                console.log(num)
            } else {
                //清除定时器
                clearInterval(timer);
            }
        }, 2000)
    </script>
</body>

</html>

倒计时案例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            width: 200px;
            height: 20px;
            background-color: black;
            color: white;
            text-align: center;
            font-size: 12px;
            line-height: 20px;
        }
    </style>
</head>

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second')
        var inputTime = +new Date('2020-04-24 18:00:00');
        countDown();
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date();
            var times = (inputTime - nowTime) / 1000
            var h = parseInt(times / 60 / 60);
            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>

this的指向问题

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击</button>
    <script>
        // this指向问题 一般情况下this的最终指向的是哪个调用他的函数
        // 1.全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
        console.log(this); //window
        function fn() {
            console.log(this); //window
        }
        fn();
        setTimeout(function () {
            console.log(this); //window
        }, 1000);
        // 2.方法调用中的this指向谁
        var o = {
            sayHi: function () {
                console.log(this); // o对象
            }
        }
        o.sayHi();
        var btn = document.querySelector('button');
        btn.onclick = function () {
            console.log(this); //btn
        }
        // 3.构造函数中this指向构造函数的实例
        function Fun() {
            console.log(this); //指向fun 实例对象
        }
        var fun = new Fun();
    </script>
</body>

</html>

JS执行机制

JS是单线程 JavaScript语言的一大特点就是单线程。也就是说，同一个时间只能做一件事。这是因为JavaScript这门脚本语言诞生的使用所致

--JavaScript是为处理页面中用户的交互以及操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作，不能同时进行。应该先添加后删除。

单线程就意味着所有任务需要排队前一个任务结束才会执行后一个任务这样所导致的问题是如果JS执行的时间过长这样就会造成页面的渲染不连贯。导致页面渲染加载阻塞的感觉。

为了解决这个问题利用多核CPU的计算能力 HTML5提出Web Worker标准。允许JavaScript脚本创建多个线程。于是JS中出现了同步和异步.

同步:前一个任务结束后再执行后一个任务。程序的指向顺序和任务的排列顺序是一样的。

异步:一个任务开始的过程中可以执行另外一个任务。

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

异步任务:js的异步任务是通过回调函数实现的.

一般异步任务有以下三种类型:

1 普通事件:如onclick resize 等

2 资源加载如 load error等

3 定时器包括 setInterval setTimeout等

异步任务相关回调函数添加到任务队列中(任务队列也成为消息队列)

js执行机制

1: 先执行执行栈中的同步任务

2: 异步任务(回调函数)放入任务队列中(还未执行等待状态)

3: 一旦执行栈中的所有同步任务执行完毕系统就会按照次序读取任务队列中的异步任务，于是读取异步任务结束等待状态

进入执行栈开始执行

所以根据上述理论打印的顺序是如果是3秒以内点击是 1 2 click 3 3秒以外点击屏幕 1 2 3 click

先执行第一步打印1 然后把click回调函数 fn 提交给异步进程当点击的时候异步进程会把fn函数丢到任务队列中

然后指向console.log('2') 打印2 然后执行setTimeout(fn,3000)把 fn 丢进异步处理进程这个时候主线程的任务执行完毕

就会查看任务队列中是否有任务如果3秒到了会执行倒计时回调函数如果之前点击了屏幕会先执行 onclick回调函数

同步任务结束后会时时查看任务队列一旦任务队列中有任务就会被执行. 这个过程被称为事件循环。任务队列中的任务执行完后会被清除.

由于主线程不断的重复获得任务执行任务再获取任务再执行所以我们称这种机制为事件循环机制。

Location对象

什么是location对象

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

所以我们将这个属性成为location对象。

URL

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

location对象的属性

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function () {
            window.location.href = 'http://www.baidu.com';
        });
        var timer = 5;
        countDown();

        function countDown() {
            div.innerHTML = '您将在' + timer + '秒钟之后跳转到相应界面';
            setInterval(function () {
                div.innerHTML = '您将在' + timer + '秒钟之后跳转到相应界面';
                if (timer != 0) {
                    timer--;
                } else {
                    window.location.href = 'http://www.baidu.com';
                }
            }, 1000);
        }
    </script>
</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>
</head>

<body>
    <form action="../HTML/index(1).html">

        用户名： <input type="text" name="uname">
        <input type="submit" value="登录">
    </form>
</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>
</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>

location对象中的方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>点击</button>
    <script>
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            // 记录浏览历史 可以回退
            // location.assign('http://www.baidu.com');
            // 也能跳转 但是不记录历史 不能后腿
            location.replace('http://www.baidu.com');
            //重新加载 相当于刷新
            //如果参数为空或者false 相当于刷新按钮或者f5 参数为true 表示强制刷新 ctrl+f5
            location.reload();
        });
    </script>
</body>

</html>

navigator对象

navigator对象包含浏览器相关的信息有很多属性我们最常用的就是userAgent，该属性可以返回由客户端发送服务器的

user-agent头部的值。

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

history对象

window对象给我们提供了一个history对象与浏览器的历史记录进行交互。

该对象包含用户(在浏览器主窗口中)访问过的URL。

原文地址：https://www.cnblogs.com/huanying2000/p/12760427.html