简介
JavaScript BOM(浏览器对象模型)是一个重要的 API,它允许 JavaScript 代码与浏览器及其底层环境进行交互。BOM 提供了许多对象,这些对象可以用来访问和操作浏览器的窗口、文档、历史记录、位置和其他功能。
窗口对象
窗口对象是 BOM 的核心对象。它表示浏览器窗口,并提供了一些属性和方法来访问和控制窗口。例如,window.location
属性可以获取或设置当前 URL,而 window.open()
方法可以打开一个新的浏览器窗口。
// 获取当前 URL
console.log(window.location);
// 打开一个新的浏览器窗口
window.open("https://google.com", "_blank");
文档对象
文档对象表示当前加载到浏览器中的 HTML 文档。它提供了一些属性和方法来访问和操作文档的元素。例如,document.body
属性可以获取文档的主体元素,而 document.createElement()
方法可以创建一个新的 HTML 元素。
// 获取文档的主体元素
console.log(document.body);
// 创建一个新的 HTML 元素
const newElement = document.createElement("div");
// 将新元素添加到文档中
document.body.appendChild(newElement);
历史记录对象
历史记录对象表示浏览器的历史记录。它提供了一些属性和方法来访问和操作历史记录。例如,history.back()
方法可以返回到上一页,而 history.pushState()
方法可以将一个新的条目添加到历史记录中。
// 返回到上一页
history.back();
// 将一个新的条目添加到历史记录中
history.pushState({ page: 2 }, "Page 2", "page2.html");
位置对象
位置对象表示当前 URL。它提供了一些属性和方法来访问和操作 URL。例如,location.href
属性可以获取当前 URL,而 location.replace()
方法可以将当前 URL 替换为一个新的 URL。
// 获取当前 URL
console.log(location.href);
// 将当前 URL 替换为一个新的 URL
location.replace("https://google.com");
总结
JavaScript BOM 是一个重要的 API,它允许 JavaScript 代码与浏览器及其底层环境进行交互。BOM 提供了许多对象,这些对象可以用来访问和操作浏览器的窗口、文档、历史记录、位置和其他功能。