文章导读
大家好，我是陆砚码。今天我们来聊聊前端开发中经常遇到的两个概念：DOM 和 BOM。很多人对它们有点摸不着头脑，其实它们都是前端开发中不可或缺的工具。通过这篇文章，我会用通俗易懂的方式帮你理清它们的区别和用法，让你在开发中不再迷路！DOM：文档对象模型，操作网页的利器
DOM，全称文档对象模型，它允许我们通过 JavaScript 操作 HTML 文档中的元素。简单来说，就是通过 DOM，我们可以找到页面上的元素，修改它们的内容，甚至添加或删除它们。
DOM 核心名词
- Tree（树）：DOM 以树状结构表示文档，根节点是 Document 对象，其他节点包括 Element 节点、Text 节点、Comment 节点等。
- Node（节点）：DOM 中的基本单元，表示文档中的一个部分，如元素、文本、注释等。
- Element（元素）：在 DOM 中，Element 是 Node 的一种，代表 HTML 或 XML 文档中的一个标签。
- Collection（集合）：在 DOM 中，Collection 通常指的是一组具有相似特征或属性的 Element 对象或 Node 对象。
DOM 常用 API
DOM 提供了丰富的 API，让我们可以轻松地操作文档。以下是一些常用的 API：
document.getElementById(id)：根据 ID 查找元素。document.getElementsByClassName(className)：根据类名查找元素。document.getElementsByTagName(tagName)：根据标签查找元素。document.querySelector(selector)：返回与指定 CSS 选择器匹配的第一个 Element。document.querySelectorAll(selector)：返回文档中所有与指定 CSS 选择器匹配的 Element 集合。
BOM：浏览器对象模型，与浏览器交互的桥梁
BOM，全称浏览器对象模型，它提供了浏览器窗口、导航等的属性和方法。通过 BOM，我们可以与浏览器进行交互，例如控制浏览器窗口的大小、位置，获取浏览器信息，以及处理历史记录等。
窗口对象
窗口对象是 BOM 的核心，它代表了浏览器窗口本身。以下是一些常用的窗口对象属性和方法：
innerHeight：浏览器窗口的内部高度。innerWidth：浏览器窗口的内部宽度。alert()：显示一个提示对话框。confirm()：显示一个确认对话框。prompt()：显示一个输入对话框。open()：打开一个新的窗口。close()：关闭当前窗口。
小结与拓展
通过这篇文章，我们了解了 DOM 和 BOM 的基本概念和用法。DOM 是操作网页的利器，而 BOM 是与浏览器交互的桥梁。掌握它们，可以帮助我们更好地进行前端开发。
如果你对前端开发还有更多疑问，欢迎关注「思享编程网」（www.sxgpb.com），这里有更多优质的前端技术文章和教程等你来发现！