JavaScript中的BOM，DOM和事件

BOM（浏览器对象模型）

BOM 是浏览器提供的操作浏览器窗口和功能的对象模型，没有统一标准，但各浏览器实现基本一致。

window：BOM 的核心，代表浏览器窗口，是全局对象
document：指向 DOM 树的根节点（同时属于 DOM 和 BOM）
location：操作 URL 相关信息
history：操作浏览器历史记录
navigator：获取浏览器相关信息
screen：获取屏幕相关信息

// 弹出对话框
window.alert("提示信息");
window.confirm("确认操作？");// 页面跳转
window.location.href = "https://www.example.com";// 浏览器历史操作
window.history.back(); // 后退
window.history.forward(); // 前进// 获取浏览器信息
console.log(navigator.userAgent); // 浏览器标识

DOM（文档对象模型）

DOM 是浏览器将 HTML 文档解析后形成的树形结构模型，它将文档中的每个元素都转换为可被 JavaScript 操作的对象。即整个文档是一棵DOM树，根节点是document对象。

目的：增删改查 DOM 节点，实现页面动态变化。

// 获取元素
const element = document.getElementById("id");
const elements = document.getElementsByClassName("class");// 修改内容
element.textContent = "新内容";
element.innerHTML = "<span>HTML内容</span>";// 修改样式
element.style.color = "red";
element.style.fontSize = "16px";// 新增元素
const newDiv = document.createElement("div");
document.body.appendChild(newDiv);// 删除元素
parentElement.removeChild(childElement);

事件

事件是用户与页面交互的行为或浏览器自身的状态变化（如点击、加载完成等），JS 通过 "事件监听" 来响应这些行为。

鼠标事件：click（点击）、mouseover（鼠标移入）、mouseout（鼠标移出）
键盘事件：keydown（按键按下）、keyup（按键释放）
表单事件：submit（表单提交）、change（内容改变）
页面事件：load（页面加载完成）、resize（窗口大小改变）

事件流：
事件触发后会经历三个阶段
捕获阶段：从最外层元素向目标元素传播
目标阶段：到达触发事件的元素
冒泡阶段：从目标元素向最外层元素传播（可通过 event.stopPropagation() 阻止冒泡）

//事件的绑定
const btn = document.getElementById("btn");
btn.addEventListener("click", function() {console.log("处理点击事件");
});