JavaScript BOM 入门：初学者指南

简介

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 提供了许多对象，这些对象可以用来访问和操作浏览器的窗口、文档、历史记录、位置和其他功能。