在JavaScript中，BOM（浏览器对象模型）和DOM（文档对象模型）是常用的两个模型，它们是操作浏览器的关键。BOM是JavaScript直接与浏览器交互的桥梁，DOM是JavaScript操作HTML文档的接口。在了解这两个模型之前，请确保您已经熟悉JavaScript。
BOM是指浏览器对象模型（Browser Object Model），它是JavaScript提供的一组与浏览器窗口有关的API。BOM可以让JavaScript直接与浏览器窗口进行交互，如设置窗口大小、判断浏览器类型等。BOM主要包括以下几个对象：
在BOM模型中，window对象是最顶层的浏览器窗口对象，它代表了浏览器窗口。通过window对象，我们可以访问和操作浏览器窗口中的所有属性和方法，例如：窗口大小、窗口位置、打开新窗口、关闭当前窗口等。
// 获取窗口大小
let width = window.innerWidth || document.documentElement.clientWidth;
let height = window.innerHeight || document.documentElement.clientHeight;
console.log(`窗口大小：${width}*${height}`);
// 打开新窗口
window.open('https://www.baidu.com');
location对象提供了当前浏览器窗口中加载文档的相关信息，例如：当前URL地址、协议、主机、路径等。通过location对象，我们可以获取和设置文档的URL地址。
// 获取当前URL地址
console.log(`当前URL地址：${location.href}`);
// 重定向网页
location.href = 'https://www.baidu.com';
history对象保存了用户在浏览器中访问过的URL地址，我们可以通过history对象，访问到用户操作的历史记录，例如：前进、后退。
// 浏览器后退
history.back();
// 浏览器前进
history.forward();
DOM是指文档对象模型（Document Object Model），它是一种独立于任何编程语言和平台的访问和操作XML、HTML文档的接口。DOM通过以树形结构表示文档，使我们可以通过JavaScript轻松地对文档进行操作。
在DOM模型中，Document对象代表了整个HTML文档，它是DOM接口的入口。我们可以通过Document对象访问和操作HTML文档中的所有元素和属性。
// 获取元素
let element = document.getElementById('elementId');
// 修改文档标题
document.title = '新标题';
Element对象代表HTML文档中的元素，我们可以通过Element对象访问和操作元素的属性和方法。
// 修改元素样式
let element = document.getElementById('elementId');
element.style.color = 'red';
// 获取元素属性
let element = document.getElementById('elementId');
let attribute = element.getAttribute('src');
BOM和DOM是JavaScript操作浏览器的关键，它们的API丰富，使用灵活。BOM可以让我们直接操作浏览器窗口，DOM可以让我们轻松地对HTML文档进行访问和操作。我们在开发JavaScript应用时，必须要掌握这两个模型。
本文链接：http://task.lmcjl.com/news/10026.html