一、先搞懂核心定義（用生活化比喻）
可以把瀏覽器想象成一棟房子：
BOM (Browser Object Model)：瀏覽器對象模型
相當于房子的整體結構（比如大門、墻壁、空調(diào)系統(tǒng)），它是操作瀏覽器本身的 API，和頁面內(nèi)容無關。
核心對象是window（瀏覽器窗口），所有 BOM 相關的屬性/方法都掛在window上（比如地址欄、刷新按鈕、彈窗、瀏覽器尺寸）。DOM (Document Object Model)：文檔對象模型
相當于房子里的家具、裝飾（比如桌子、沙發(fā)、掛畫），它是操作網(wǎng)頁內(nèi)容的 API，把 HTML 文檔轉換成可被 JS 操作的“對象樹”。
核心對象是document（頁面文檔），而document本身也是window的一個屬性（window.document）。
二、具體解析 & 常用示例
1. BOM（操作瀏覽器）
BOM 沒有統(tǒng)一的官方標準（不同瀏覽器略有差異），核心功能和常用 API：
- 控制瀏覽器窗口：尺寸、位置、關閉/打開新窗口
- 操作瀏覽器導航：地址欄、歷史記錄、刷新
- 瀏覽器環(huán)境：定時器、彈窗、本地存儲
常用示例代碼：
// 1. 瀏覽器窗口相關
console.log(window.innerWidth); // 獲取瀏覽器可視區(qū)域寬度
window.open('https://www.baidu.com'); // 打開新窗口
window.close(); // 關閉當前窗口
// 2. 地址欄/導航相關
console.log(window.location.href); // 獲取當前頁面URL
window.location.reload(); // 刷新頁面
window.history.back(); // 瀏覽器后退
// 3. 定時器（BOM核心）
setTimeout(() => { alert('3秒后彈出'); }, 3000); // 延遲執(zhí)行
setInterval(() => { console.log('每秒執(zhí)行'); }, 1000); // 定時重復執(zhí)行
// 4. 彈窗
window.alert('提示框'); // 提示彈窗
window.confirm('確認框'); // 確認/取消彈窗
2. DOM（操作頁面內(nèi)容）
DOM 有 W3C 統(tǒng)一標準，它把 HTML 文檔解析成“節(jié)點樹”（比如 <html> 是根節(jié)點，<body> 是子節(jié)點，<div> 是孫子節(jié)點），JS 可以通過 DOM API 增刪改查頁面元素。
常用示例代碼：
<!-- 先有一個簡單的HTML結構 -->
<div id="box">Hello DOM</div>
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
<script>
// 1. 獲取元素（查）
const box = document.getElementById('box'); // 通過ID獲取
const lis = document.getElementsByTagName('li'); // 通過標簽名獲取
// 2. 修改元素（改）
box.innerText = '修改后的內(nèi)容'; // 修改文本
box.style.color = 'red'; // 修改樣式
// 3. 創(chuàng)建元素（增）
const newLi = document.createElement('li');
newLi.innerText = '列表3';
document.querySelector('ul').appendChild(newLi); // 添加到ul里
// 4. 刪除元素（刪）
document.querySelector('ul').removeChild(lis[0]); // 刪除第一個li
</script>
三、DOM 和 BOM 的核心關系
image.png
- 從屬關系：DOM 是 BOM 的一部分（
document是window的屬性）； - 功能邊界：BOM 管“瀏覽器”，DOM 管“頁面內(nèi)容”；
- 共同基礎：都基于 JS 操作，且都是前端交互的核心。
總結
-
BOM 是操作瀏覽器本身的工具，核心是
window，關注瀏覽器窗口、導航、定時器等，無統(tǒng)一標準； -
DOM 是操作網(wǎng)頁內(nèi)容的工具，核心是
document，把 HTML 轉成節(jié)點樹，支持增刪改查，有 W3C 統(tǒng)一標準； - 關系：DOM 屬于 BOM，都掛載在
window下，是前端 JS 操作瀏覽器和頁面的兩大核心。
