【H2O2|全栈】JS入门知识（十）BOM

目录

前言

开篇语

准备工作

认识BOM

概念

基本性质

延迟加载器

窗口尺寸

计时器

单次计时器

概念

注意事项

清除计时器

间歇计时器

概念

注意事项

清除计时器

案例

this指向window的元素

同步和异步

结束语

前言

开篇语

本系列博客主要分享JavaScript的基础语法知识，本期为第十期，主要讲解BOM相关重点知识点。

与HTML和CSS相比，JS加入了很多逻辑性的元素在里面，所以需要一定的逻辑思维能力，要求能够整合一些知识。如果遇到不理解之处，可以参阅同系列之前的章节。

准备工作

软件：【参考版本】Visual Studio Code

插件（扩展包）：Open in browser, Live Preview, Live Server, Tencent Cloud AI Code Assistant, htmltagwrap

提示：在不熟练的阶段建议关闭AI助手

浏览器版本：Chrome

系统版本： Win10/11/其他非Windows版本

认识BOM

概念

JS中的几个核心概念——ES，DOM，BOM，目前我们已经接触了之前的两个，且目前为止我们所学的知识都属于基础阶段ecmascript的内容，后续进阶篇中我们会讲解ES6的内容。

BOM，全称为Browser Object Model，即浏览器对象模型，其核心对象为窗口（window）。

基本性质

window相当于我们的最高级节点，也就是根节点所在。

此前我们使用根节点一般是使用下面的方式——

document.documentElement

现在，我们只需要用一个window就可以代表上面的代码。

事实上，所有的DOM元素都是在window下的，比如我们的函数——

fn() 

它实际上是下面代码的缩写形式——

window.fn() 

同样的，又比如我们在控制台输出一个变量——

var a = 5

console.log(a) 

实质上也是下面的代码的简写——

var a = 5

console.log(window.a) 

就像DOM一样，BOM也可以绑定事件侦听器——

window.addEventListener("click", function () {

        console.log(1)

}) 

延迟加载器

window.onload()方法相当于是一个延迟加载器，会把js延迟加载，延迟到DOM节点和图片，flash，css等加载完之后再执行。

window.DOMContentLoaded()是DOM加载完毕，不包含 图片，falsh，css 等就可以执行js加载，速度比onload()更快一些。

想要比较二者的执行速度，我们可以为一个按钮同时绑定onload和DOMContentLoaded事件，为了排除浏览器解析顺序的影响，我们先设置onload，后设置DOMContentLoaded——

        window.addEventListener("load", function () {
            console.log(1);
        })

        window.addEventListener("DOMContentLoaded", function () {
            console.log(2);
        })

在控制台输出的效