DOM 和 BOM 的协奏曲：JavaScript 的交响乐

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 应用，增强用户体验。