第 3️⃣ 座大山：DOM、BOM 操作 [ ricepudding ]

DOM（文档对象模型）

核心概念

DOM 是浏览器将 HTML/XML 文档解析后生成的树形对象模型，把文档的每个节点 （标签、属性、文本、注释等） 转化为可通过 JS 操作的对象，实现对页面内容、结构、样式的动态修改；
本质：跨平台、语言无关的接口，规定了如何访问和操作文档节点；
核心思想：将文档抽象为 “节点树”，根节点是 document （代表整个文档）；

DOM 节点树结构

文档中所有内容都是节点 （Node），主要分为四类：

节点类型	明	示例
文档节点（Document）	根节点，唯一	document
元素节点（Element）	HTML 标签	<div>、<p>、<a>
属性节点（Attribute）	标签的属性	class=“box”、id=“title”
文本节点（Text）	标签内的文本内容	<p>hello</p> 中的 hello

示例：

<html>
  <body>
    <div id="box">Hello DOM</div>
  </body>
</html>

document（文档节点）
└── html（元素节点）
    ├── head（元素节点，省略）
    └── body（元素节点）
        └── div（元素节点，id="box"）
            └── Hello DOM（文本节点）

DOM 核心 API

节点选择 （获取元素）：

// 1. 通过 ID 获取（返回单个元素）
const box = document.getElementById('box');

// 2. 通过类名获取（返回 HTMLCollection 伪数组）
const items = document.getElementsByClassName('item');

// 3. 通过标签名获取（返回 HTMLCollection 伪数组）
const divs = document.getElementsByTagName('div');

// 4. 通过选择器获取（返回单个元素/NodeList 伪数组）
const firstItem = document.querySelector('.item'); // 第一个匹配元素
const allItems = document.querySelectorAll('.item'); // 所有匹配元素（静态集合）

节点创建与添加：

// 1. 创建元素节点
const newDiv = document.createElement('div');

// 2. 设置属性/内容
newDiv.id = 'new-box';
newDiv.className = 'content';
newDiv.textContent = '动态创建的节点'; // 纯文本（推荐，避免XSS）
newDiv.innerHTML = '<span>带标签的内容</span>'; // 解析HTML（慎用，有XSS风险）

// 3. 插入到文档中
document.body.appendChild(newDiv); // 追加到父节点末尾
document.body.insertBefore(newDiv, box); // 插入到box之前

节点删除与替换：

// 删除节点（父节点调用）
document.body.removeChild(newDiv);

// 替换节点
const oldDiv = document.getElementById('box');
document.body.replaceChild(newDiv, oldDiv);

样式操作：

box.style.width = '200px';
box.style.backgroundColor = 'red'; // 驼峰命名（无短横线）

box.classList.add('active'); // 添加类
box.classList.remove('active'); // 移除类
box.classList.toggle('active'); // 切换类
box.classList.contains('active'); // 判断是否有类

事件绑定 （DOM 事件）：

// 方式1：直接绑定（易覆盖）
box.onclick = function() {
  console.log('点击了box');
};

// 方式2：addEventListener（推荐，可绑定多个事件）
box.addEventListener('click', function(e) {
  console.log('事件对象：', e); // e 包含事件信息（坐标、目标元素等）
  console.log('目标元素：', e.target); // 触发事件的节点
});

// 移除事件（需引用同一个函数）
const handleClick = () => console.log('点击');
box.addEventListener('click', handleClick);
box.removeEventListener('click', handleClick);

DOM 遍历 （节点关系）：每个节点都有指向关联节点的属性；

<script>
// 父节点
box.parentNode; // 直接父节点
box.parentElement; // 直接父元素（仅元素节点）

// 子节点
box.childNodes; // 所有子节点（含文本/注释，NodeList）
box.children; // 所有子元素（HTMLCollection）
box.firstChild; // 第一个子节点
box.firstElementChild; // 第一个子元素
box.lastElementChild; // 最后一个子元素

// 兄弟节点
box.previousSibling; // 上一个兄弟节点
box.previousElementSibling; // 上一个兄弟元素
box.nextElementSibling; // 下一个兄弟元素
</script>

DOM 性能优化

减少 DOM 查询：缓存查询结果 （避免重复 document.querySelector）；
批量操作：使用 DocumentFragment 批量插入节点 （避免多次重排）；
减少重排 / 重绘：
1. 先隐藏元素 （display: none），修改后再显示；
2. 批量修改样式 （合并 style 操作，或修改 class）；
避免使用 innerHTML 频繁修改 （优先 textContent）；

DOM 尺寸和位置

窗口尺寸

元素尺寸

元素相对于浏览器窗口位置

调用 dom.scrollTo(x, y) 可以设置元素的滚动位置，x 和 y 分别表示 scrollLeft 和 scrollTop；

该方法通用元素回到元素顶部 dom.scrollTo(0, 0)；

如果要监听元素的滚动，可以监听 scroll 事件类型；

元素相对于视口位置

const { top, left, right, bottom } = Element.getBoundingClientRect()

top、left、right、bottom 均相对于视口；

BOM（浏览器对象模型）

核心概念

BOM 是浏览器提供的操作浏览器窗口 / 环境的对象模型，无统一标准 （由各浏览器厂商实现），核心是 window 对象 （全局对象）；
本质：围绕浏览器窗口的一系列对象集合，控制浏览器的导航、窗口、存储、网络等功能；
核心对象：window （BOM 的顶层对象，也是 JS 全局作用域）；

BOM 核心对象与 API

window 对象 （全局对象）

var a = 10;
console.log(window.a); // 10

function fn() {}
console.log(window.fn === fn); // true

// 窗口可视区域尺寸（不含滚动条/边框）
window.innerWidth; // 宽度
window.innerHeight; // 高度

// 窗口位置（部分浏览器限制跨域获取）
window.screenLeft; // 窗口距屏幕左侧距离
window.screenTop; // 窗口距屏幕顶部距离

// 调整窗口（需用户交互，否则浏览器拦截）
window.resizeTo(800, 600); // 调整为800x600
window.moveTo(100, 100); // 移动到(100,100)

// 打开新窗口（返回新窗口的window对象）
const newWin = window.open('https://www.baidu.com', '_blank', 'width=800,height=600');

// 关闭窗口（仅能关闭自己打开的窗口）
newWin.close();

// 窗口聚焦/失焦
newWin.focus();
newWin.blur();

// 一次性定时器（延迟执行）
const timer1 = setTimeout(() => {
  console.log('1秒后执行');
}, 1000);

// 循环定时器（重复执行）
const timer2 = setInterval(() => {
  console.log('每1秒执行一次');
}, 1000);

// 清除定时器
clearTimeout(timer1);
clearInterval(timer2);

location 对象 （地址栏）：

// URL 解析（示例：https://www.baidu.com:8080/path?name=test#hash）
location.href; // 完整URL：https://www.baidu.com:8080/path?name=test#hash
location.protocol; // 协议：https:
location.host; // 主机+端口：www.baidu.com:8080
location.hostname; // 主机：www.baidu.com
location.port; // 端口：8080
location.pathname; // 路径：/path
location.search; // 查询参数：?name=test
location.hash; // 哈希（锚点）：#hash

// 导航操作
location.href = 'https://www.baidu.com'; // 跳转新URL（可后退）
location.replace('https://www.baidu.com'); // 替换URL（不可后退）
location.reload(); // 刷新页面（默认从缓存加载，true 强制从服务器加载）

history 对象 （浏览器历史）：

history.back(); // 后退（等同于点击浏览器后退按钮）
history.forward(); // 前进（等同于点击浏览器前进按钮）
history.go(-1); // 后退1步（go(1) 前进1步，go(0) 刷新）

// HTML5 新增：添加历史记录（无刷新修改URL）
history.pushState({ data: 'test' }, '标题', '/new-path'); // 添加新记录
history.replaceState({ data: 'test' }, '标题', '/new-path'); // 替换当前记录

// 监听历史记录变化
window.addEventListener('popstate', (e) => {
  console.log('历史记录变化：', e.state); // 获取pushState的data
});

navigator 对象 （浏览器信息）

navigator.userAgent; // 用户代理字符串（判断浏览器/设备）
navigator.platform; // 操作系统平台（Win32、MacIntel等）
navigator.language; // 浏览器语言（zh-CN、en-US等）
navigator.onLine; // 是否联网（true/false）
navigator.geolocation; // 地理位置（需用户授权）
navigator.cookieEnabled; // 是否启用Cookie

screen 对象 （屏幕信息）

screen.width; // 屏幕宽度（像素）
screen.height; // 屏幕高度（像素）
screen.availWidth; // 可用宽度（不含任务栏）
screen.availHeight; // 可用高度（不含任务栏）
screen.colorDepth; // 颜色深度（通常24/32）

存储相关 （BOM 扩展）

localStorage.setItem('name', '张三'); // 存储
localStorage.getItem('name'); // 获取："张三"
localStorage.removeItem('name'); // 移除
localStorage.clear(); // 清空所有

sessionStorage.setItem('token', '123456');

// 设置cookie（name=value; expires=过期时间; path=/; domain=域名; secure）
document.cookie = 'username=张三; expires=' + new Date(2025, 11, 31).toUTCString() + '; path=/';

// 获取cookie（需手动解析）
function getCookie(name) {
  const cookies = document.cookie.split('; ');
  for (let cookie of cookies) {
    const [key, value] = cookie.split('=');
    if (key === name) return decodeURIComponent(value);
  }
  return '';
}

DOM 与 BOM 的核心区别与联系

区别：

维度	DOM（文档对象模型）	BOM（浏览器对象模型）
核心对象	document	window
作用范围	操作页面内容 / 结构 / 样式	操作浏览器窗口 / 导航 / 存储 / 设备
标准规范	W3C 标准化（跨浏览器一致）	无统一标准（浏览器厂商自定义，部分 API 有差异）
核心思想	文档节点树	浏览器窗口的全局对象集合
典型操作	获取元素、修改样式、绑定事件	跳转 URL、控制窗口、存储数据

联系：
1. window 是 BOM 的顶层对象，也是 JS 全局作用域，document 是 window 的属性 （window.document === document）；
2. BOM 提供浏览器环境，DOM 依赖 BOM 存在 （没有浏览器窗口，就没有文档）；
3. 两者结合实现前端交互：例如通过 BOM 的 location 跳转页面，通过 DOM 修改页面内容；

打赏作者

您的打赏是我前进的动力

微信

支付宝

第 2️⃣ 座大山：浅克隆、深克隆

剑指 Offer 28.对称的二叉树

你好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

1. DOM（文档对象模型）
2. BOM（浏览器对象模型）
1. 2.1. 核心概念
2. 2.2. BOM 核心对象与 API
3. DOM 与 BOM 的核心区别与联系