DOM：文档对象模型
DOM 将网页呈现为一个文档树，其中每个 HTML 元素都是一个节点。通过 DOM，JavaScript 可以访问、修改和操纵网页的内容和结构。
- 获取元素：document.getElementById("element-id")、document.querySelector("selector")
- 修改内容：element.innerHTML = "New Content"
- 添加元素：element.appendChild(newElement)
- 删除元素：element.parentNode.removeChild(element)
BOM：浏览器对象模型
BOM 提供了对浏览器及其实例的访问，包括窗口、历史记录、位置和导航。这让 JavaScript 能够与环境交互，提供更丰富和有响应性的用户体验。
- 获取窗口大小：window.innerWidth、window.innerHeight
- 改变窗口位置：window.moveTo(x, y)、window.resizeTo(width, height)
- 获取历史记录：history.back()、history.forward()
- 获取页面的 URL：location.href
协奏曲：DOM 和 BOM 协作
DOM 和 BOM 共同协作，赋能 web 应用实现各种交互性和动态性。以下是它们协作的一些常见示例：
- 动态内容加载：使用 DOM 添加和移除元素，从服务器加载内容。
- 浏览器事件处理：使用 BOM 监听窗口事件，并在用户交互时触发 DOM 操作。
- 用户界面控制：使用 DOM 修改元素属性和样式，创建互动式的用户界面。
- 页面导航：使用 BOM 访问历史记录和位置，实现无缝的页面导航。
示例代码
以下代码片段演示了 DOM 和 BOM 的协作，动态创建一个包含当前窗口大小信息的元素：
// 获取窗口大小
const width = window.innerWidth;
const height = window.innerHeight;
// 创建一个新元素
const element = document.createElement("div");
// 设置元素的内容
element.innerHTML = `Window Size: ${width}px x ${height}px`;
// 将元素添加到文档中
document.body.appendChild(element);结论
DOM 和 BOM 共同形成了 JavaScript 交响乐中不可或缺的部分，提供了与浏览器和文档交互的能力。通过了解它们之间的协作，开发者可以创建强大且有响应性的 web 应用，增强用户体验。
