浏览器对象模型(BOM)打造用户体验，释放网页无限可能

18. 浏览器对象模型（BOM）

---

JavaScript的三大核心组成部分分别是ECMAScript、DOM和BOM，其中，BOM（Browser Object Model）即浏览器对象模型，它为脚本提供了一套用于与浏览器窗口、历史记录、导航栏以及屏幕进行交互的接口，使开发者能够创建更加交互式和动态的网页。

1. BOM基本概念

BOM由一系列内置对象组成，这些对象提供了许多有用的属性和方法，可以用来获取和操作浏览器窗口、历史记录、导航栏和屏幕等信息。BOM中最常用的对象包括：

• window对象：代表浏览器窗口本身，提供了控制窗口大小、位置和标题的方法。
• document对象：代表当前加载的HTML文档，提供了访问和操作HTML元素的方法。
• location对象：提供了有关当前URL的信息，并允许脚本更改URL。
• history对象：提供了访问和操作浏览器历史记录的方法。
• navigator对象：提供了有关浏览器和操作系统的相关信息。
• screen对象：提供了有关屏幕大小和分辨率的信息。
• performance对象：提供了有关页面加载和执行性能的信息。

2. BOM常用对象及其实例

• window对象 ：window.open()方法可以用来打开一个新的浏览器窗口或选项卡。window.close()方法可以用来关闭当前窗口。window.moveTo()方法可以用来移动窗口的位置。window.resizeTo()方法可以用来调整窗口的大小。
• document对象 ：document.getElementById()方法可以用来获取具有指定ID的元素。document.getElementsByClassName()方法可以用来获取具有指定类名的元素。document.createElement()方法可以用来创建新的元素。document.appendChild()方法可以用来将新元素添加到文档中。
• location对象 ：location.href属性可以用来获取当前页面的URL。location.pathname属性可以用来获取当前页面的路径。location.search属性可以用来获取当前页面的查询字符串。location.assign()方法可以用来加载一个新的页面。
• history对象 ：history.back()方法可以用来返回到上一个页面。history.forward()方法可以用来前进到下一个页面。history.go()方法可以用来加载指定的历史记录项。
• navigator对象 ：navigator.userAgent属性可以用来获取有关浏览器的信息。navigator.platform属性可以用来获取有关操作系统的相关信息。navigator.language属性可以用来获取浏览器的语言。
• screen对象 ：screen.width属性可以用来获取屏幕的宽度。screen.height属性可以用来获取屏幕的高度。screen.availWidth属性可以用来获取屏幕的可用宽度。screen.availHeight属性可以用来获取屏幕的可用高度。
• performance对象 ：performance.timing属性提供了有关页面加载和执行性能的信息。performance.navigation属性提供了有关导航历史记录的信息。performance.memory属性提供了有关内存使用情况的信息。

3. BOM的应用场景

BOM被广泛应用于各种网页开发场景中，比如：

• 创建动态的菜单和导航栏。
• 实现页面跳转和后退功能。
• 获取和设置cookie。
• 检测浏览器的类型和版本。
• 获取屏幕的分辨率和颜色深度。
• 测量页面的加载和执行时间。

4. 结语

BOM是JavaScript开发中必不可少的重要工具，掌握了BOM及其相关对象的使用方法，可以帮助开发者创建更加交互式和动态的网页，从而提升用户体验。