DOM和BOMDOM：用于操作网页内容，是开发动态网页的核心。 BOM：用于操作浏览器行为，控制窗口、导航和存储。

DOM是文档对象模型，处理网页内容，而BOM是浏览器对象模型，处理浏览器窗口和导航。

DOM（文档对象模型）

定义

以树状结构表示HTML/XML文档，提供操作元素的接口（如document.getElementById()）
通过DOM，开发者可以动态修改网页内容、结构和样式。

核心对象

document：整个文档的入口（根节点）。
Element：HTML 元素节点（如 <div>、<p>）。
Node：所有 DOM 节点的基类（包括元素、文本、注释等）。

核心操作

获取元素（getElementById querySelectorAll）
修改内容（textContent innerHTML）
增加节点（appendChild）
删除节点（removeChild)

示例:

// 获取元素
const element = document.getElementById("myId");
const elements = document.querySelectorAll(".myClass");

// 修改内容
element.textContent = "新内容";
element.innerHTML = "<strong>加粗文本</strong>";

// 修改样式
element.style.color = "red";

// 添加/删除元素
const newElement = document.createElement("div");
element.appendChild(newElement);
element.removeChild(newElement);

// 事件监听
element.addEventListener("click", function() {
  console.log("元素被点击了！");
});

应用场景

动态更新网页内容。
表单验证和交互。
响应点击、滚动等用户事件。
实现动画和视觉效果。

BOM（浏览对象模型）

定义

操作浏览器窗口的接口，包含window（全局对象）、location（URL 信息）、history（浏览历史）等。

核心对象

window：浏览器窗口的顶级对象，全局作用域中的变量和函数都是 window 的属性和方法。
location：当前页面的 URL 信息。
history：浏览器的历史记录。
navigator：浏览器的信息（如用户代理、平台）。
screen：用户屏幕的信息（如分辨率）。
localStorage/sessionStorage：浏览器存储数据。

常用功能

alert()弹窗
window.open()打开新窗口
location.reload()刷新页面

示例：

// 操作浏览器窗口
window.open("https://www.example.com"); // 打开新窗口
window.close(); // 关闭当前窗口
window.alert("提示信息"); // 弹窗

// 获取或修改 URL
console.log(location.href); // 当前页面 URL
location.href = "https://www.example.com"; // 跳转页面
location.reload(); // 刷新页面

// 操作历史记录
history.back(); // 后退
history.forward(); // 前进
history.pushState({}, "", "/new-page"); // 添加历史记录

// 获取浏览器信息
console.log(navigator.userAgent); // 用户代理字符串

// 获取屏幕信息
console.log(screen.width, screen.height); // 屏幕分辨率

// 本地存储
localStorage.setItem("key", "value");
const value = localStorage.getItem("key");

应用场景

控制浏览器窗口（打开/关闭标签页）。
管理页面导航和 URL。
存储用户数据（如登录状态）。
获取浏览器或设备信息。

区别与联系

DOM 关注文档内容，BOM 关注浏览器行为。
window 对象是 BOM 的核心，同时作为 DOM 的全局入口（如 window.document）。

特性	DOM	BOM
作用对象	网页文档（HTML/XML）	浏览器窗口和功能
核心对象	`document`, `Element`, `Node`	`window`, `location`, `history`
标准化	W3C 标准	无统一标准，依赖浏览器实现
主要用途	操作网页内容和结构	操作浏览器行为和窗口
示例操作	修改元素内容、绑定事件监听	跳转页面、弹窗、存储数据

DOM和BOM和协作

// 点击按钮后跳转页面（DOM 操作 + BOM 操作）
document.getElementById("myButton").addEventListener("click", function() {
  location.href = "https://www.example.com";
});

// 根据窗口大小调整布局（BOM 获取窗口尺寸 + DOM 操作元素）
window.addEventListener("resize", function() {
  const width = window.innerWidth;
  const element = document.getElementById("myElement");
  if (width < 768) {
    element.style.display = "none";
  } else {
    element.style.display = "block";
  }
});

总结

DOM：用于操作网页内容，是开发动态网页的核心。
BOM：用于操作浏览器行为，控制窗口、导航和存储。
两者结合可以实现完整的用户交互和浏览器功能控制。