JavaScript中BOM和DOM详解

前言

在JavaScript中，BOM（浏览器对象模型）和DOM（文档对象模型）是常用的两个模型，它们是操作浏览器的关键。BOM是JavaScript直接与浏览器交互的桥梁，DOM是JavaScript操作HTML文档的接口。在了解这两个模型之前，请确保您已经熟悉JavaScript。

BOM

BOM是指浏览器对象模型（Browser Object Model），它是JavaScript提供的一组与浏览器窗口有关的API。BOM可以让JavaScript直接与浏览器窗口进行交互，如设置窗口大小、判断浏览器类型等。BOM主要包括以下几个对象：

window对象

在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对象

location对象提供了当前浏览器窗口中加载文档的相关信息，例如：当前URL地址、协议、主机、路径等。通过location对象，我们可以获取和设置文档的URL地址。

示例一：获取当前URL地址

// 获取当前URL地址
console.log(`当前URL地址：${location.href}`);

示例二：重定向网页

// 重定向网页
location.href = 'https://www.baidu.com';

history对象

history对象保存了用户在浏览器中访问过的URL地址，我们可以通过history对象，访问到用户操作的历史记录，例如：前进、后退。

示例一：浏览器后退

// 浏览器后退
history.back();

示例二：浏览器前进

// 浏览器前进
history.forward();

DOM

DOM是指文档对象模型（Document Object Model），它是一种独立于任何编程语言和平台的访问和操作XML、HTML文档的接口。DOM通过以树形结构表示文档，使我们可以通过JavaScript轻松地对文档进行操作。

Document对象

在DOM模型中，Document对象代表了整个HTML文档，它是DOM接口的入口。我们可以通过Document对象访问和操作HTML文档中的所有元素和属性。

示例一：获取元素

// 获取元素
let element = document.getElementById('elementId');

示例二：修改文档标题

// 修改文档标题
document.title = '新标题';

Element对象

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应用时，必须要掌握这两个模型。