你们好啊，今天咱们来聊聊前端里Zui常被提到的两个大名鼎鼎的“骨架”，那就是 DOM 和 BOM。别以为这两个词听起来像学术论文，其实它们跟你天天用的浏览器、页面dou有一千零一分之八关系。

DOM 的全名是 Document Object Model，直译就是文档对象模型。想象一下当你打开一个网页时浏览器会把整个 HTML 代码拆成一棵树形结构——每个标签dou是树上的节点，每个属性、文本内容dou是节点里的小盒子。

这个树形结构叫Zuo DOM 树。它给了我们 JavaScript 一个“地图”，让我们Ke以像搬砖工人一样，对页面里的任何一个元素进行增删改查。

比如你想把某个按钮改成红色，只要找到它在 DOM 树中的位置，然后给它加个 style 属性就行了。或者你想在页面上动态生成一段文字，也只需要往 DOM 树里插入一个新的文本节点。

常见的操作有：

document.getElementById

.innerHTML

.appendChild

.removeChild

这些方法其实dou在帮你在那棵kan不见的树上Zuo事儿。

BOM 是 Browser Object Model，翻译成中文就是浏览器对象模型。它不是专门针对页面内容，而是把整个浏览器窗口当成一个对象来对待。

BOM 给我们提供了与浏览器窗口、地址栏、滚动条等交互的方法。比如：

window.location.href = 'https://example.com'

alert

window.open

screen.width

BOM 的核心是 window 对象，所有其它接口dou挂靠在这个窗口上面。Ke以说 BOM 就像是房子里的电路系统：控制灯光、电源、空调等，你用 JavaScript 就Neng操控它们。

BOM 和 DOM 虽然名字相似，但作用完全不同。BOM 关注的是整个浏览器环境，而 DOM 则聚焦于页面内容。

不过它们也不是完全独立的两条线：BOM 的 window 对象里面就包含了 document 对象，也就是 DOM 的根节点。所以从技术角度讲，DOM Ke以算作 BOM 的一个子集。

beyond this relationship, 在实际开发中我们经常kan到两者交叉使用。例如：

// 用 BOM 控制窗口尺寸
window.resizeTo;
// 用 DOM 修改页面内容
document.getElementById.textContent = '嘿，这里是标题';

哈，这问题有点偏离主题，但我也得顺便跟大家说一句，hen多人搞前端时会发现自己的博客或项目没被百度收录，一般原因有几个：

b“robots.txt”文件里写了NoIndex—直接告诉搜索引擎不要抓取；

“”标签放在 head 部分； 这样无论是 Google 还是百度，dou不会把你的页面列入索引； 第三点嘛，就是网站根本没有外链指向，没有其他站点链接过来也没啥流量可供爬虫爬，所以自然没机会进榜单； 还有可Neng网站被误判为垃圾站点，被搜索引擎屏蔽了 IP 或域名。

"Ru果你真的想让搜索引擎抓到你的网页"——记住清理掉上述禁止索引的配置，再让其他靠谱的网站给你指链接，你就Neng慢慢登上搜索结果啦！"

DML这个词我倒没怎么见过但它其实就是使用 JavaScript 操作 DOM 的一套惯例。Ru果你用 jQuery 或 Vue、React 等框架，douKe以说是在玩 DML，只不过写法geng优雅、geng模块化。

BOM 则经常出现在需要控制弹窗、跳转或获取用户设备信息的时候。例如：

A/B 测试时Ru果想让访客总是在同一点加载页面Ke以用下面这段 JS 把滚动条定位到某个偏移量：

- 老前端老兄：BOM 就像电视遥控器，拿着就Neng调节频道；Ru果手滑按错，就可Neng换到广告页——这跟 JS 中 alert hen像，一点小失误就全局弹窗。

- 新手妹子：BOM Neng让我们随时知道屏幕大小，就好比拿到手机尺寸表，决定是否要横屏或竖屏展示。

- 程序员老王：DOM 是装修细节，BOM 是装修后的整体布局，两者缺一不可。Ru果只修墙而不管灯光，那家还是黑暗无光哦！

- BOM – 浏览器层面控制，全局视野大块头； - IDocument – 文档层面细节，把握每块砖瓦细节； - 两者交叉使用才Neng真正完成酷炫交互与功Neng实现； - 要注意 SEO 问题，例如避免无意中加入禁止索引标签，否则百度搜不到你哦； - 常见错误包括误用 window.alert 替代 console.log ，导致用户体验变糟糕。