什么是dom对象和bom对象-什么是 DOM 与 BOM

` 这种代码块，在浏览器里就长成了一棵枝繁叶茂的树，每一层都得老老实实地执行相应的操作。
比如你想让某个按钮变大，你就得走到树的根，然后往下翻，找到那个对应 div 的位置，对它说“变大”。
要是这棵树又忒深，要么结构忒乱，操作起来就绕远路了，就连好办出错。 相比之下，BOM（Browser Object Model）对象就是专门用来管后台那套数据的，确实是名字挺叫得响，但实际工作中比 DOM 复杂得多了。大量开发者一上来就把它和 DOM 混为一谈，认定既然都有对象管理，那把 DOM 树当树，BOM 树也当树不就行了？结局就是指令发出去，数据传回去，中间仿佛挂了一根没断的线，最终页面卡顿要么报错。BOM 的对象主要管的是整个浏览器的操作系统，包含网页、本地存、工夫戳、轮询这些。
比如我想把用户收藏的视频推给第二个浏览器窗口，要么把当前的工夫更新到页面上显示出来，这活儿就得靠 BOM 对象干。它更像是一个大的数据库，包含了你浏览器里所有的实体信息，不管是文本还是图像，只要能被浏览器处理的，它都能帮你拿过来。
这就好比 DOM 是你在前台接待客户，而 BOM 是后台仓库管理员，负责把货从仓库搬出来。
要是你们俩配合不默契，要么仓库管理员没管好库存，前台再好看也是摆设。 实际上用 DOM 和 BOM 有啥区别，大量时候根本用不着特意去分。大量人就是认定 DOM 就是 HTML，BOM 就是 JavaScript，然后就得在脑子里划个等号。但这玩意儿可玩性高着呢。
比如你在写代码时，DOM 对象负责管住页面上的视觉效果，BOM 对象负责加载那些大文件。
你想看一张高清大图，DOM 对象可能会让你把它缩小显示，然后加载 BOM 对象里的图片数据进来，这时候 DOM 和 BOM 就得握手，否则就卡死。再比如页面布局，DOM 对象里那些 `position` 属性拍板了元素是浮起来还是贴底，而 BOM 对象里的内存管理则拍板了浏览器能不能及时释放掉那些不再需求的内存，防止网页突然变慢。 举个实际的数据例子，假设你要做一个新闻聚合页面，里面有五个省份的实时股市数据。DOM 对象只能负责把这五个标题显示在页面上，字体大小、颜色、间距都靠它调。但要是你想让这五个数据以动态图表的形式滚动展示，要么实时刷新，你就得调用 BOM 对象里的定时器函数。
比如每隔几秒，BOM 对象里那个 `setInterval` 就跳个出来，请求最新的股市数据包，拿到数据后放回 DOM 对象显示。
这时候要是 BOM 对象里的缓存没清理好，数据可能还没新鲜出炉，DOM 对象就显示毛病了。
这时候就需求你手动干预，比如调用 `clearInterval` 清理掉定时器，要么用 `setTimeout` 管住轮询的频率。 再说说数据量管理的难题。DOM 对象别看撇脱，但万一网页加载了一个庞大的视频文件，DOM 对象就得一遍遍去解析、渲染、获取节点，这时候浏览器会卡得跟死机一样。
这时候就需求 BOM 对象帮忙，比如用 `localStorage` 要么 `sessionStorage` 把数据存有本地，别让 DOM 对象去读那些占内存的地方。
要么用 Web Worker，把耗 CPU 的计算任务扔出去处理，别让主线程被拖垮。
这种分工，实际上就是为了保住浏览器的稳定性和用户体验。 大量人认定 BOM 忒抽象，出于它的 API 名字长得像字符串，操作起来比 DOM 对象繁琐得多。
确实，BOM 对象里的 `document` 和 `window` 就在你手边，得一个个一个个去调，不像 DOM 对象那样能够直接选元素。
比如你想操作浏览器窗口的大小，DOM 对象里有个 `document.documentElement`，直接改个 `style.width` 就行。但要是你想操作浏览器地址栏，要么浏览器标签页的标题，就得去 BOM 对象里找 `window` 要么 `history` 对象。
这种细节上的繁琐，刚启动上手挺好办劝退新人，但一旦你熟悉了，就会发现这帮对象实际上是浏览器底层的一套逻辑服务体系。它们把复杂的底层操作封装成了一个个对象，让你不用去管那堆复杂的指针和内存地址，只需求关切业务逻辑。 说到底，DOM 和 BOM 这事儿，就是一场关于“哪位能干活”和“哪位该负责”的博弈。DOM 对象是前台秀肌肉，哪位都能管，哪位都能改；BOM 对象是后台值钱货，哪位也别想随意动，要不就你懂底层原理。大量时候，一个页面要是 DOM 和 BOM 配合不好，哪怕视觉做得再漂亮，用户打开的时候还是会认定不对劲。
比如加载页面时 DOM 对象拼命渲染，但 BOM 对象里的网络请求还没回过来，这时候浏览器就会报错，页面卡住。
这时候就得靠 BOM 对象里的毛病处理机制，比如 `onload` 要么 `error` 监听器来救场。 再举个例子，你目前在写一个模拟器，想模拟一个老式打字机的效果。DOM 对象负责把按键对应的文本渲染出来，字体、颜色、动画效果都靠它搞定。但要是想模拟按键按下时的那一瞬间的物理反馈，比如指针移动、纸张摩擦的声音，那就得靠 BOM 对象里的 `performance.now` 要么 `Date.now` 来记录工夫戳，配合 `setTimeout` 来处理工夫间隔。
要是 BOM 对象里的时钟不准，模拟出来的手感就彻底错了。
这时候你就得帮 BOM 对象校准工夫，要么手动干预工夫逻辑，确保它和 DOM 对象的节奏一致。
这种配合，有时候就连比写代码本身还难，出于彼此都在互相挤牙膏。 实际上，理解这两个对象的核心，不在于死记硬背它们的 API 文档，而在于理解它们在浏览器生命周期里的角色。DOM 对象是主角，是用户直接看到的舞台；BOM 对象是配角，是支撑这些主角存有和运行的土壤。
没有 BOM 对象，DOM 对象就是一堆孤零零的代码，飘在浏览器里随时可能蒸发。
没有 DOM 对象，BOM 对象里存的数据也发不出去，也就成了垃圾。两者缺一不可，但分工明确，各司其职，才是好页面该有的样子。 最终说句实在话，别总盯着这两个名字不放。当你真正遇到性能瓶颈、布局错乱要么数据加载慢的难题时，大约率是它们俩在打架。
这时候别去纠结哪个对象用得对不对，试着去测测性能，看看哪儿卡住了，是哪个对象在拖后腿。
有时候换一种思路，把 DOM 对象拆分成多个小节点，把 BOM 对象里的本事一个个挖出来给 DOM 对象用，效果可能比硬拗着用两个大对象要好得多。
毕竟，代码写得再漂亮，要是用户看不懂、不会用，那也是白搭。理解 DOM 和 BOM，不是为了考你背多少 API，而是为了让你能在这个复杂的浏览器世界里，像指挥家一样，把前后台配合得严丝合缝，给用户供给最流畅的体验。
这就叫专家思维，琢磨透了，这玩意儿也就没那么可怕了。