【Linux我做主 · 前端硬核】JavaScript DOM 核心操作：从内容到节点的实战指南（2026最新版）——小白到高手，一文吃透现代 DOM 操作
大家好，我是重阳。上期我们深度扒了 JVM 垃圾收集器，今天回归前端本质——JavaScript DOM 操作。
无论你是 0 基础前端、React/Vue 开发者，还是想彻底理解“为什么 React 要用虚拟 DOM”，这篇 2026 版实战指南都会让你从“只会 document.getElementById”进化到“熟练操控 Shadow DOM、MutationObserver、性能优化”。
核心思想：DOM 不是静态 HTML，而是活的节点树 + 事件 + 样式。掌握它，你就真正掌握了浏览器渲染的命脉！
1. DOM 到底是什么？（先看这张图，记住就赢了）
DOM = Document Object Model：浏览器把 HTML 解析成一棵树状对象结构，JS 可以随时读写它。
2026 年标准 DOM 树结构图：
- Document：根节点（document）
- Element：标签节点（div、p、button）
- Text：文本节点
- Attr：属性节点（已废弃，大多用 element.getAttribute）
- ShadowRoot：影子 DOM（Web Component 核心）
关键概念：一切皆 Node，Node 有 parentNode、childNodes、nextSibling 等。
2. 核心操作速查表（复制粘贴就能用，2026 推荐写法）
查找节点（查询性能从高到低）
| 操作 | 推荐写法（2026） | 说明 | 性能 |
|---|---|---|---|
| 单个 ID | document.getElementById('id') | 最快 | ★★★★★ |
| 单个选择器 | document.querySelector('.class') | 通用，推荐 | ★★★★☆ |
| 多个选择器 | document.querySelectorAll('.class') | 返回 NodeList（类数组） | ★★★★ |
| 按标签 | document.getElementsByTagName('div') | 实时集合（HTMLCollection） | ★★★★ |
| 现代推荐 | document.querySelectorAll(':scope > div') | 支持 :scope 伪类 | ★★★★★ |
注意：querySelectorAll 返回静态 NodeList（不会自动更新），getElementsBy* 返回实时集合。
修改内容（Content 操作）
// 1. 纯文本（最快、最安全）
element.textContent = '新内容'; // 不会解析 HTML
console.log(element.textContent); // 读取
// 2. 带 HTML（小心 XSS！）
element.innerHTML = '<strong>粗体</strong>';
// 3. 现代推荐：使用 DOM 方法（无 XSS）
const strong = document.createElement('strong');
strong.textContent = '粗体';
element.append(strong);操作节点（Node 操作神器）
// 创建节点
const div = document.createElement('div');
div.id = 'new';
div.classList.add('box', 'red');
div.setAttribute('data-id', '123');
// 添加/删除
parent.appendChild(div); // 旧写法
parent.append(div, span); // 现代！支持多个
parent.prepend(div);
parent.removeChild(child);
child.remove(); // 最爽的现代写法
// 克隆
const clone = div.cloneNode(true); // deep clone
// 替换
parent.replaceChild(newNode, oldNode);2026 推荐：永远用 append、prepend、replaceChildren、remove。
属性、样式、类操作
// 类
element.classList.add('active');
element.classList.toggle('hidden', condition);
element.classList.contains('red');
// 样式（推荐用 class）
element.style.backgroundColor = 'red';
element.style.setProperty('--theme-color', '#ff0');
// 属性
element.setAttribute('disabled', '');
element.removeAttribute('disabled');
element.dataset.id = '123'; // 自动 data-id事件（现代写法）
// 推荐：addEventListener（支持移除）
element.addEventListener('click', handleClick, { once: true });
function handleClick(e) {
console.log(e.target); // 真正点击的元素
console.log(e.currentTarget); // 绑定事件的元素
}
// 委托（性能神器）
document.body.addEventListener('click', (e) => {
if (e.target.matches('.btn')) {
console.log('按钮被点');
}
});3. 高级 DOM 操作（1-3 年开发者必会）
1. Fragment（批量操作神器，性能飞起）
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const li = document.createElement('li');
li.textContent = i;
fragment.append(li);
}
ul.append(fragment); // 只触发一次重排！2. MutationObserver（监听 DOM 变化）
const observer = new MutationObserver((mutations) => {
for (const mut of mutations) {
if (mut.type === 'childList') console.log('子节点变了');
}
});
observer.observe(document.body, { childList: true, subtree: true });3. Shadow DOM（Web Component 隔离）
const host = document.createElement('my-component');
const shadow = host.attachShadow({ mode: 'open' });
shadow.innerHTML = `<style>p { color: red; }</style><p>内部样式不泄露</p>`;
document.body.append(host);4. 性能优化技巧
- 读写分离：先读所有属性，再统一写。
- 用
requestAnimationFrame包裹批量 DOM 操作。 - 避免
innerHTML大量使用。 - 列表用
key+ 虚拟 DOM（React 帮你做了）。
4. 实战案例：动态 Todo List（完整可复制）
<ul id="list"></ul>
<input id="input" placeholder="输入任务">
<button id="add">添加</button>const list = document.getElementById('list');
const input = document.getElementById('input');
document.getElementById('add').addEventListener('click', () => {
if (!input.value) return;
const li = document.createElement('li');
li.innerHTML = `
<span>${input.value}</span>
<button class="delete">删除</button>
`;
li.querySelector('.delete').addEventListener('click', () => li.remove());
list.append(li);
input.value = '';
});5. 一句话总结 + 行动建议
DOM 操作本质：一切都是 Node + 操作树 + 事件冒泡。
2026 年，querySelector + append + classList + addEventListener 就是你的日常武器，Shadow DOM 和 MutationObserver 是进阶王牌。
今天就行动（浏览器控制台直接敲）：
- 打开任意网页，按 F12。
- 敲
document.querySelectorAll('*').length看节点数。 - 试试
document.body.style.background = 'linear-gradient(45deg, #f00, #00f)'。
想看 Web Component 完整实战、虚拟 DOM 手写实现、DOM 性能压测对比 还是 React 18 新并发模式下的 DOM 更新？
评论区打 1（Web Component）、2（虚拟 DOM 手写）、3（性能压测），我下一期立刻出！🚀
推荐资源（2026 最新）：
- MDN Web Docs: DOM
- WHATWG DOM Living Standard
- “You Don’t Know JS: DOM & Events”
DOM 我做主，从今天起，你就是浏览器节点的主人！🌳
前端 + Linux，咱们持续硬核，下期见！💻
