DOM编程之浅谈BOM(dom操作的方法有哪些)
写在前面
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等于parentself属性始终指向自身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() | 用新的文档替换当前文档(不会生产历史记录，不能使用回退按钮回退) |
| ## 写在最后 |
作者：一碗周
链接：https://juejin.cn/post/7031557884341125127