DOM编程之浅谈BOMBOM的全称为Browser Object Model，被翻译为浏览器对象模型，它是由一系列对象构

这是我参与11月更文挑战的第16天，活动详情查看：2021最后一次更文挑战

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第四十六篇-《浅谈BOM》

本系列文章在掘金首发，编写不易转载请获得允许

写在前面

BOM的全称为Browser Object Model，被翻译为浏览器对象模型，它是由一系列对象构成，这些对象可以简单理解为是由各个有浏览器所提供的。BOM是用于实现Web开发与浏览器之间互相操作的基础。

BOM主要包含5个基础对象，如下所示：

window：表示浏览器实例
location：加载文档的信息和常用导航功能实例
navigator：客户端标识和信息的对象实例
screen：客户端显示器信息
history：当前窗口建立以来的导航历史记录

Window对象

Window对象是什么

BOM中最核心的对象就是Window对象，该对象表示运行HTML页面的浏览器窗口。

在浏览器环境中，Window对象具有双重角色。该对象既是允许JavaScript逻辑访问就浏览器的一个对象，又是ECMAScript规范中的Global全局对象。

这就说明了，在浏览器环境中运行JavaScript逻辑时，在全局作用域中定义对象、变量和函数都是Window对象的属性和方法。

可以通过Window对象访问全局对象的属性和方法，例如NaN，undefined和parseInt()方法等。

示例代码如下所示：

<body>
  <script>
    var v = 100;
    function name() {
      console.log('我是函数')
    }
    console.log(window.v) // 100
    window.name()         // 我是函数
  </script>
</body>

Window对象的属性

Window对象的属性属性较多，包含了浏览器窗口的基本信息、也包含了一些复杂的信息。我们来介绍一下这其中比较常见的属性：

top属性始终指向最外层的窗口，及浏览器窗口本身
parent属性始终指向当前窗口的父窗口，如果当前窗口就是最外层窗口，则top等于parent
self属性始终指向自身
innerWidth和innerHight属性返回当期浏览器窗口的可视宽度和高度
outterWidth和outterHeight属性回当期浏览器窗口的整个宽度和高度

Window对象的方法

alert(message)：显示带有一段消息和一个确认按钮的警告框。
confirm(message)：显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt(text,defaultText)：显示可提示用户输入的对话框。用户如果点击取消按钮则返回null，否则返回对应的文本内容
close()：用于关闭浏览器窗口
open()：请参阅location.href与window.open()的用法与区别

定时器

定时器的具体方法由Window对象提供，共有以下两种定时器：

延迟执行：指的是指定代码在指定时间后被执行，而不是立刻被执行。
周期执行：指的是指定程序代码在执行时间为间隔，重复被执行。

延迟执行

设置延迟执行通过setTimeout()方法，该方法的会在定时器结束之后，执行一个函数。语法结构如下：

var timeoutID = setTimeout(callback[, delay, param1, param2, ...])

上面的参数中，callback表示定时器结束执行的函数；delay表示延迟的时间，这个参数是可选的，默认为0；后面的参数均为可选参数，表示定时器结束后执行函数的参数。

这个函数的回调函数是一个正整数，表示定时器的编号，将这个编号传递给clearTimeout()来取消定时器。

周期执行

周期执行通过setInterval()方法，该方法的语法结构同setTimeout()一致，不同的是setTimeout()执行一遍就不会在执行了，而setInterval()只要是不出现异常且不调用clearInterval()方法结束周期执行则会一直执行下去。

示例代码如下所示：

<body>
  <script>
    var count = 0
    var id = setInterval(() => {
      console.log('我被重复' + ++count + '执行了')
      if (count === 10) {
        clearInterval(id)
        console.log('我的执行结束了')
      }
    }, 1000);
  </script>
</body>

上面的代码中，console.log('我被重复' + ++count + '执行了')将会被执行10次，在10次的时候进入if语句块，打印我的执行结束了从而结束执行。

Navigator对象

Navigator对象包含了一些有关浏览器状态的信息。可以通过window.navigator属性得到Navigator对象。

Navigator对象提供了一系列常用属性，获取当前浏览器的信息

属性名称	描述
`appCodeName`	浏览器的代码名
`appName`	浏览器的名称
`appVersion`	浏览器的平台和版本信息
`platform`	运行浏览器的操作平台

History对象

History对象包含用户在浏览器中访问过URL。

History对象提供的属性和方法如下表所示

属性/方法	描述
`length`属性	获取用户在浏览器中访问网址的数量。
`forward()`方法	实现跳转下一个页面，作用和浏览器的前进按钮一样。
`back()`方法	实现跳转到上一个页面，作用和浏览器的回退按钮一样
`go()`方法	实现跳转到指定的页面。如果为正数表示前进，为负数表示后退。

Location对象

Location对象是什么

Location对象包含了浏览器的地址栏的信息，该对象主要用于获取和设置地址。

Location对象很特别，因为该对象既是Window对象的属性，又是Document对象的属性。

console.log(window.location == document.location) // true

Location对象的属性

Location对象不仅存储了地址栏中的信息，该提供了解析功能。可以通过不同的Location对象的属性访问不同的地址栏中的信息。

具体属性如下表所示

属性名称	描述
`host`	返回服务器名称和端口号
`hostname`	返回服务器名称
`href`	返回当前价值页面的完整URL
`pathname`	返回当前URL中的目录和文件名
`port`	返回当前URL中的端口号
`protocol`	返回页面使用的网络协议

Location对象的方法

方法名称	描述
`assign()`	载入一个新的文档，作用于直接修改Location相同
`reload()`	重新加载当前文件，作用和刷新按钮一样。参数为`true`时，则会强制清空缓存刷新页面
`replace()`	用新的文档替换当前文档(不会生产历史记录，不能使用回退按钮回退)

写在最后

你如果看到这里，我感到很荣幸，如果你喜欢这篇文章，你可以为这篇文章点上一个小赞；你如果喜欢这个专栏，我会一直更新到百篇以上，可以点一下后面的链接从头学前端 - 一碗周的专栏 - 掘金 (juejin.cn)进入之后给个关注。

最后也可以给我点个关注，万分荣庆。

往期推荐