BOM(Browser Object Model,浏览器对象模型)是指浏览器提供的一系列与浏览器窗口及脚本进行交互的对象和方法。BOM 与 DOM 有所不同,DOM 主要关注于 HTML 和 XML 文档的解析和访问,而 BOM 则更侧重于浏览器窗口和框架,以及浏览器与脚本之间的交互。
BOM 提供了一些核心对象,这些对象允许开发者与浏览器窗口及其组件进行交互。以下是 BOM 中的一些核心对象:
Window 对象:BOM 的顶层对象,它代表浏览器窗口或者一个标签页。所有全局 JavaScript 对象、函数和变量自动成为 window 对象的成员。window 对象的方法和属性允许我们控制浏览器窗口的行为,如打开新窗口、关闭窗口、滚动页面等。
Location 对象:用于获取或设置窗口的 URL,并可以用于解析 URL 的各个组成部分。例如,location.href 属性可以获取或设置当前页面的完整 URL,location.reload() 方法可以重新加载当前页面。
Navigator 对象:包含有关浏览器的信息,如浏览器名称、版本、渲染引擎等。这个对象的信息可以用来确定用户正在使用的浏览器类型和版本,以便编写跨浏览器的代码。
Screen 对象:包含有关客户端屏幕的信息,如屏幕宽度、高度、像素比等。这些信息可以用于调整网页的布局或设计,以适应不同大小的屏幕。
History 对象:提供了与浏览器历史记录进行交互的功能,允许你前进或后退到浏览器历史中的不同页面。例如,history.back() 方法相当于点击浏览器的后退按钮。
Document 对象:虽然 Document 对象属于 DOM 的一部分,但它是通过 BOM 的 Window 对象访问的。通过 Window 对象的 document 属性,我们可以访问和修改 DOM。
通过 BOM,JavaScript 可以控制浏览器窗口的行为,包括打开新窗口、关闭窗口、导航到新的 URL、更新浏览器历史记录等。这使得 JavaScript 能够与浏览器进行更紧密的集成,创建出更丰富、更交互式的网页应用。
需要注意的是,由于 BOM 的某些功能和特性依赖于特定的浏览器实现,因此在使用 BOM 时需要考虑到跨浏览器兼容性的问题。不同的浏览器可能会对 BOM 的某些方法和属性有不同的实现或支持程度,因此开发者需要仔细测试他们的代码以确保在各种浏览器上都能正常工作。
Window
介绍:浏览器窗口对象。
获取:直接使用window,其中window,可以省略。window.alert("Hello Window");
alert("Hello Window");
属性:1、history:对History对象的只读引用。请参阅History对象。
2、location:用于窗口或框架的Location对象。请参阅Location对象。
3、navigator:对Navigator对象的只读引用。请参阅Navigator对象。
方法:1、alert():显示带有一段消息和一个确定按钮的警告框。
2、confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。
3、setlnterval():按照指定的周期(以毫秒计)来调用函数或计算表达式。
4、setTimeout():在指定的毫秒数后调用函数或计算表达式。
Location
介绍:地址栏对象。
获取:使用window.location获取,其中window.可以省略。window.location.属性;
location.属性;
属性:href:设置或返回完整的URL。location.href = "https://www.itcast.cn";