在JavaScript中，DOM（Document Object Model）和BOM（Browser Object Model）是两个核心的概念，它们都与浏览器环境中的对象模型有关，但具有不同的职责和关注点。
DOM（Document Object Model）
DOM 是 HTML 和 XML 文档的编程接口，它提供了对文档的结构化表示，并定义了一种方式——程序能够改变文档的结构和样式。简而言之，DOM 把文档（如HTML文件）结构化为节点和对象的树形结构，使得程序能够轻松地修改文档的内容和结构。
DOM 的主要部分包括：
文档对象：代表了整个HTML文档。
元素对象：代表了HTML元素（如<div>, <p>, <a>等）。
属性对象：代表了元素的属性（如class, id, style等）。
文本对象：代表了元素中的文本内容。
举例：
假设我们有以下的HTML结构：
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="myTitle">Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
在JavaScript中，我们可以使用DOM API来访问和修改这个文档：
javascript
// 获取标题元素
var titleElement = document.getElementById('myTitle');
// 修改标题元素的内容
titleElement.textContent = 'Hello, Universe!';
// 创建新的段落元素
var newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
// 将新段落添加到body中
document.body.appendChild(newParagraph);
BOM（Browser Object Model）
BOM 提供了独立于任何特定文档的对象，用于浏览器窗口和脚本之间进行交互。BOM 实际上没有相关标准，现代浏览器已经（几乎）实现了 JavaScript 引擎相同的 BOM。BOM 包括：
窗口对象：代表浏览器窗口或一个标签页，并提供了很多全局函数和变量。
位置对象：包含了有关浏览器窗口当前位置的信息。
导航对象：包含了有关浏览器历史记录的信息。
屏幕对象：包含了有关客户端屏幕的信息。
本地对象：如localStorage和sessionStorage，用于在浏览器中存储数据。
举例：
使用BOM来操作浏览器窗口：
javascript
// 打开新的窗口或标签页
var newWindow = window.open('https://www.example.com', '_blank');
// 关闭当前窗口或标签页（通常不推荐这样做，因为它会中断用户体验）
window.close();
// 获取浏览器窗口的宽度和高度
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
// 滚动到页面顶部
window.scrollTo(0, 0);
// 使用localStorage存储数据
localStorage.setItem('myKey', 'myValue');
// 读取localStorage中的数据
var value = localStorage.getItem('myKey');
总结：DOM 主要关注文档（如HTML）的结构和内容，而BOM 则关注浏览器窗口和脚本之间的交互，包括窗口的属性和方法，导航历史，以及存储机制等。在开发网页应用时，理解这两者之间的区别和如何一起使用它们是非常重要的。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
