javascript学习笔记（三）BOM和DOM详解

当我们学习 JavaScript 时，需要了解 BOM（Browser Object Model，浏览器对象模型）和 DOM（Document Object Model，文档对象模型），这两个模型是 JavaScript 与浏览器之间的接口，通过这两个模型，JavaScript 可以操作浏览器的窗口、框架，以及 HTML 文档的各个元素。

BOM

BOM 主要用于管理浏览器窗口和框架，包括以下对象：

• window：代表整个浏览器窗口，是 BOM 的顶级对象。
• location：代表浏览器当前正在显示的页面的 URL 地址。
• history：代表浏览器的访问历史记录，可以实现后退和前进功能。
• navigator：提供浏览器的相关信息，比如浏览器名称和版本号等。

下面是一个示例，通过 JavaScript 控制浏览器的窗口大小和位置：

window.resizeTo(500, 500); // 调整浏览器窗口大小
window.moveTo(100, 100); // 移动浏览器窗口位置

DOM

DOM 主要用于操作 HTML 文档的各个元素，包含以下对象：

• document：代表整个 HTML 文档，是 DOM 的顶级对象。
• Element：代表 HTML 文档中的元素节点，比如 div、p、ul 等元素。
• NodeList：代表多个元素节点的集合，比如通过 document.getElementsByTagName() 获取的元素列表。
• Event：代表浏览器中发生的事件，比如点击事件、滚动事件等。

下面是一个示例，通过 JavaScript 改变 HTML 文档中的元素内容：

<!-- HTML 代码 -->
<p id="demo">Hello World!</p>

// JavaScript 代码
var element = document.getElementById("demo");
element.innerHTML = "Hello JavaScript!";

以上内容只是 BOM 和 DOM 的一个简单介绍，想要更深入地了解 JavaScript 和这两个模型，可以参考我们的 JavaScript 学习笔记（三）BOM 和 DOM 详解 文章。