走进浏览器对象模型的世界：揭开BOM的神秘面纱

前端

2023-12-05 10:32:00

BOM是浏览器对象模型的简称，它是客户端脚本用来与浏览器进行交互的一组对象。BOM允许脚本访问有关浏览器窗口、屏幕以及浏览器与用户交互的信息。

BOM的常见对象

BOM包含多个对象，其中最常用的包括：

document对象 ：代表当前的HTML文档，提供了对文档元素和内容的访问。
window对象 ：代表浏览器窗口，提供了对窗口属性和方法的访问。
screen对象 ：代表用户的屏幕，提供了对屏幕属性和方法的访问。
location对象 ：代表当前页面的URL，提供了对URL属性和方法的访问。
history对象 ：代表浏览器的历史记录，提供了对历史记录属性和方法的访问。
navigator对象 ：代表浏览器的信息，提供了对浏览器名称、版本、语言等信息的访问。

BOM属性和方法的使用

BOM中的对象都具有自己的属性和方法，可以通过点号运算符访问和使用。例如，可以通过document.title访问当前页面的标题，可以通过window.alert()方法显示一个警告框。

BOM中常见对象的属性和方法

对象	属性/方法	说明
document	title	获取或设置当前页面的标题
document	body	获取或设置当前页面的主体内容
window	alert()	显示一个警告框
window	confirm()	显示一个确认框
window	prompt()	显示一个输入框
screen	width	获取屏幕的宽度
screen	height	获取屏幕的高度
location	href	获取或设置当前页面的URL
location	pathname	获取当前页面的路径名
location	search	获取当前页面的查询字符串
history	back()	返回到上一个页面
history	forward()	前进到下一个页面
history	go()	跳转到指定页面
navigator	userAgent	获取浏览器的用户代理字符串
navigator	appVersion	获取浏览器的版本号

BOM中Cookie的操作

Cookie是存储在浏览器中的小块数据，可以用来跟踪用户在网站上的活动。BOM提供了对Cookie的操作，可以通过document.cookie属性来获取或设置Cookie。

// 获取所有Cookie
var cookies = document.cookie;

// 设置Cookie
document.cookie = "username=John Doe";

// 删除Cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";