前端学习7—BOM

1 BOM 概述

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

DOM 和 BOM 的区别：

DOM：

• 文档对象模型
• DOM 就是把文档看做一个对象来看待
• DOM 的顶级对象是 document
• DOM 主要学习的是操作页面元素
• DOM 是 W3C 标准规范

BOM：

• 浏览器对象模型
• 把浏览器看做一个对象看待
• BOM 的顶级对象是 window
• BOM 学习的是浏览器窗口交互的一些对象
• BOM 是浏览器厂商在各自浏览器上定义的，兼容性较差

BOM 的构成：

BOM 比 DOM 更大，BOM 包含 DOM

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

1. 它是 JS 访问浏览器窗口的一个接口
2. 它是一个全局对象，定义在全局作用域的变量，函数都会变成 window 对象的属性和方法

在调用的时候可以省略 window，前面学习的对话框都属于 window 对象方法，如 alert()、prompt() 等

注意：window 下的一个特殊属性 window.name，所以不要命名 name 的变量

2 window 对象的常见事件

2.1 窗口加载事件

① window.onload = function() {}

② window.addEventListener(‘load’, function() {});

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

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

③ document.addEventListener(‘DOMContentLoaded’, function() {})

1. DOMContentLoaded 事件触发时，仅当 DOM 加载完成，不包括样式表、图片、flash 等（如果页面的图片很多的话，从用户访问到 onload 触发可能需要较长的时间，此时可以使用 DOMContentLoaded 事件）
2. IE9 以上才支持

window.onload = function(){
    console.log('onload1');
}

2.2 调整窗口大小事件

① window.onresize = function() {}

② window.addEventListener(‘resize’, function(){})

1. 只要窗口大小发生像素变化，就会触发这个事件
2. 利用这个事件可以完成响应式布局，window.innerWidth 可以获取当前屏幕的宽度

<!-- 浏览器宽度小于 800 时，隐藏盒子 -->
<style>
    div {
        height: 400px;
        width: 400px;
        background-color: pink;
    }
</style>
<script>
    window.addEventListener('load', function() {
        var div = document.querySelector('div');
        window.addEventListener('resize', function() {
            if (window.innerWidth < 800) {
                div.style.display = 'none';
            } else {
                div.style.display = 'block';
            }
        })
    })
</script>
<div></div>

3 定时器

3.1 setTimeOut()

开启 setTimeOut() 定时器

① window.setTimeOut(调用函数, 延迟的毫秒数); 用于设置一个定时器，该定时器在定时器到期后执行调用函数

1. window 可以省略
2. 这个调用函数也称为回调函数，可以直接写函数、函数名或者**采取字符串’函数名’**三种形式（第三种不推荐）
3. 延迟的毫秒数省略默认为0，如果写，必须是毫秒数
4. 因为定时器可能会很多，所以经常会给定时器复制一个标识符

<!-- 5s 后自动关闭广告 -->
<div>guanggao</div>
<script>
    div = document.querySelector('div');
    function callback() {
        div.style.display = 'none';
    }
    var time1 = setTimeout(callback, 5000);
	var time2 = setTimeout('callback()', 5000);		// 不提倡
</script>

停止 setTineOut() 定时器

② window.clearTimeOut(timeoutID) 取消先前通过调用 setTimeout() 建立的定时器

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

<button>点击停止定时器</button>
<script>
    button = document.querySelector('button');
    function callback() {
        console.log('5s 后输出');
    }
    var time1 = setTimeout(callback, 5000);
    button.addEventListener('click', function(){
        clearTimeout(time1);
    })
</script>

3.2 setInterval()

开启 setInterval() 定时器

window.setInterval(回调函数, 间隔的参数) 重复调用一个函数，每隔这个时间，就去调用一次回调函数

1. window 可以省略
2. 这个调用函数也称为回调函数，可以直接写函数、函数名或者**采取字符串’函数名’**三种形式（第三种不推荐）
3. 延迟的毫秒数省略默认为0，如果写，必须是毫秒数，表示每隔多少毫秒就自动调用这个函数
4. 因为定时器可能会很多，所以经常会给定时器复制一个标识符

<!-- 倒计时案例 -->
<div>
    <div class="day fl"></div>
    <div class="hour fl"></div>
    <div class="mintue fl"></div>
    <div class="second fl"></div>
</div>
<script>
    var inputTime = +new Date('2024-10-20 18:00:00');		// 返回的是用书输入时间的总毫秒数
    var day = document.querySelector('.day');
    var hour = document.querySelector('.hour');
    var mintue = document.querySelector('.mintue');
    var second = document.querySelector('.second');
    // 先调用一次这个函数，防止第一次刷新页面有空白
    timeInterval()
    // 开启定时器
    setInterval(timeInterval, 1000);	
    function timeInterval() {
        var nowTime = +new Date();		// 返回的是当前时间的总毫秒数
        var times = (inputTime - nowTime) / 1000;		// times 是剩余时间的总秒数
        // 要用 parseInt 转成整数
        var d = parseInt(times / 60 / 60 / 24);
        d = d < 10 ? '0' + d : d;
        day.innerHTML = d;
        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;
        mintue.innerHTML = m;
        var s = parseInt(times % 60);
        s = s < 10 ? '0' + s : s;
        second.innerHTML = s;
    }
</script>

停止 setInterval() 定时器

window.clearInterval(intervalID); 取消先前通过调用 setInterval() 建立的定时器

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

<!-- 发送短信：点击按钮后，该按钮60s内不能再点击 -->
<input type="text">
<button>发送</button>
<script>
    var btn = document.querySelector('button');
    var time = 6;		// 定义剩下的秒数
    btn.addEventListener('click', function(){
        btn.disabled = true;
        var timer = setInterval(function(){
            if(time === 0) {
                // 清除定时器和复原按钮
                clearInterval(timer);
                btn.disabled = false;
                btn.innerHTML = '发送';
                time = 6
            } else {
                btn.innerHTML = '还剩' + time-- + '秒';
            }			
        }, 1000)
    })
</script>

3.3 this 指向问题

1. 全局作用域或者普通函数中的 this 都是指向全局对象 window（定时器里面的 this 也是指向 window）

   console.log(this);		// window
   function fn() {
       console.log(this);		// window
   }
   window.fn();
   window.setTimeout(function(){
       console.log(this);			// window
   }, 1000)
   

2. 方法调用中，谁调用就指向谁

   var obj = {
       sayHi: function(){
           console.log(this);		// {sayHi: ƒ} (obj这个对象)
       }
   }
   obj.sayHi();
   var btn = document.querySelector('button');
   btn.addEventListener('click', function(){
       console.log(this);			// <button>发送</button> (btn这个按钮对象)
   })
   

3. 构造函数中 this 指向构造函数的实例

   function fun() {
       console.log(this);		// fun {} (fun 实例对象)
   }
   var f = new fun();
   

4 JS 执行机制

JavaScript 语言的一大特点就是单线程，也就是说，同一时间只能做一件事，这是因为 JavaScript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作 DOM 而诞生的，比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行，应该先进行添加，之后再删除

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

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

同步：

钱一个任务结束后才能执行后一个任务，程序的执行顺序和任务的排列顺序是一致的、同步的，比如只有等水烧开了，才去洗菜切菜

异步：

在做一件事情的时候，因为这件事情会花费很长时间，在做这件事情的同时，还可以去处理其他事情，比如可以在烧水的同时，去洗菜、切菜

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

console.log(1);
setTimeout(function(){
    console.log(2);
}, 1000);
console.log(3);
// 输出循顺序：1 3 2

console.log(1);
setTimeout(function(){
    console.log(2);
}, 0);
console.log(3);
// 输出循顺序还是：1 3 2

4.1 同步和异步

同步任务

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

异步任务

JS 的异步任务是通过回调函数实现的

异步任务主要有以下类型：

1. 普通事件：click、resize 等
2. 资源加载：load、error 等
3. 定时器：setTimeout、setInterval 等

异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）

4.2 JS 执行机制

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

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

5 location 对象

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

5.1 URL

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

URL 的一般语法格式为：

protool://host[:port]/path/[?query]#fragment

例：http://127.0.0.1:8848/shoping/js.html?name=andy

组成	说明
protool	通信协议：http、ftp、maito 等
host	主机（域名）：www.baidu.com
port	端口号（可选），省略时使用方案的默认端口，如 http 的默认端口号是 80
path	路径：由 0 或多个 ‘/’ 符号隔开的字符串，一般用来表示主机上的一个目录或者文件地址
query	参数：以键值对的形式，通过 & 符号分隔开来
fragment	片段：# 后面内容常见于链接锚点

5.2 location 对象的属性

location 对象的属性	返回值
location.href	获取或者设置 整个 URL
location.host	返回主机（域名）
location.port	返回端口号
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段

• 重点记住：href 和 search

5.3 获取 URL 参数数据案例

1. 第一个登陆页面，里面有提交表单，action 提交到 index.html 页面
2. 第二个页面可以使用第一个页面的参数（location.search）
3. 利用 substr 去掉 ?
4. 利用 split 分割键和值

<!-- 第一个页面 -->
<form action="index.html">
    用户名：<input type="text" name="uname" />
    <input type="submit" value="提交" />
</form>
<!-- 第二个页面 index.html 的js -->
<script>
    // 去掉？ substr(起始位置, 截取几个字符);
	var value = location.search.substr(1);
	var arr = value.split('=')
	console.log(arr[1] + ' 欢迎您');
</script>

5.4 location 对象的方法

location对象方法	返回值
location.assign()	和 href 一样，可以跳转页面（也称为重定向），记录历史，有回退功能
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者 f5 ，如果参数为 true，强制刷新 ctrl+f5

6 navigator 对象

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

console.log(navigator.userAgent);	// Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

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

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //跳转到手机端的页面
 } else {
    window.location.href = "";     //跳转到pc端的页面
 }

7 history 对象

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

history对象方法	作用
back()	后退
forward(0)	前进
go(参数)	前进/后退功能，取决于里面的参数（1：前进一个页面，-1：后退一个页面）

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