JavaScript DOM 操作是前端开发中最核心、最常用的技能之一。它让静态的 HTML 页面“活”起来，可以动态修改内容、结构、样式、监听交互等。
下面从基础 → 进阶 → 实战的路径，带你系统掌握 DOM 核心操作（基于现代浏览器标准，2025–2026 仍然是主流写法）。
1. DOM 核心概念速览
| 概念 | 说明 | 代表对象 | 常用属性/方法示例 |
|---|---|---|---|
| Document | 整个文档的入口 | document | document.querySelector() |
| Element | HTML 标签元素 | <div>, <p> | element.textContent, element.classList |
| Node | 更广义的概念（包括元素、文本、注释） | 所有节点 | node.parentNode, node.childNodes |
| Text | 文本内容节点 | 文本 | textNode.nodeValue |
| DocumentFragment | 轻量文档片段（内存中操作，不触发重排） | — | document.createDocumentFragment() |
2. 查找节点（最常用的 5 种方式）
// 1. ID（最快）
const el = document.getElementById('app');
// 2. 选择器（最常用！现代首选）
const btn = document.querySelector('.btn-primary'); // 第一个匹配
const allCards = document.querySelectorAll('.card'); // NodeList（类数组）
// 3. 标签名
const paragraphs = document.getElementsByTagName('p'); // HTMLCollection（活的集合）
// 4. 类名
const warnings = document.getElementsByClassName('warning');
// 5. name 属性（常用于表单）
const inputs = document.getElementsByName('username');2025 年推荐优先级：querySelector / querySelectorAll > getElementById > 其他
3. 内容读写（最常用操作）
// 纯文本（最安全，推荐）
element.textContent = '新内容'; // 写
console.log(element.textContent); // 读（不含 HTML）
// 包含 HTML（小心 XSS）
element.innerHTML = '<strong>加粗</strong>内容';
// 表单元素专用
input.value = '默认值'; // 写
console.log(input.value); // 读
// 更现代的方式（dataset）
element.dataset.id = '123'; // data-id="123"
console.log(element.dataset.theme); // 读取 data-theme4. 创建 / 添加 / 删除节点（增删改查核心）
// 创建元素
const newDiv = document.createElement('div');
newDiv.className = 'alert alert-success';
newDiv.textContent = '操作成功！';
// 创建文本节点（了解即可，textContent 更常用）
const text = document.createTextNode('Hello');
// 添加到页面（三种常用方式）
parent.appendChild(newDiv); // 末尾添加
parent.insertBefore(newDiv, referenceNode); // 在某个子节点前插入
parent.prepend(newDiv); // 第一个子节点前插入（现代）
// 批量添加（性能更好）
const fragment = document.createDocumentFragment();
fragment.append(div1, div2, div3);
container.appendChild(fragment); // 只触发一次重排
// 删除
element.remove(); // 现代推荐（IE 不支持）
parent.removeChild(element); // 传统方式
// 清空所有子元素
container.innerHTML = ''; // 最简单
// 或
while (container.firstChild) {
container.removeChild(container.firstChild);
}5. 属性 / 样式 / 类操作
// 属性（通用）
img.setAttribute('src', 'new.jpg');
console.log(img.getAttribute('alt'));
// 推荐方式（更简洁）
img.src = 'new.jpg';
img.alt = '新图片';
console.log(img.id);
// 样式（少量修改用）
element.style.color = 'red';
element.style.fontSize = '18px';
// 大量样式 → class
element.classList.add('active', 'highlight');
element.classList.remove('hidden');
element.classList.toggle('dark-mode');
console.log(element.classList.contains('error')); // true/false6. 遍历节点（父子兄弟）
// 父节点
el.parentNode; // 可能返回非元素节点
el.parentElement; // 只返回元素（推荐）
// 子节点
el.children; // 只包含元素（HTMLCollection）
el.childNodes; // 包含所有节点（文本、注释等）
// 第一个/最后一个
el.firstElementChild;
el.lastElementChild;
// 兄弟
el.nextElementSibling;
el.previousElementSibling;7. 实战案例合集（直接复制可用）
案例1：动态待办列表（增删改）
<ul id="todo-list"></ul>
<input id="todo-input" placeholder="输入待办...">
<button id="add-btn">添加</button>const list = document.getElementById('todo-list');
const input = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
addBtn.addEventListener('click', () => {
if (!input.value.trim()) return;
const li = document.createElement('li');
li.textContent = input.value;
const delBtn = document.createElement('button');
delBtn.textContent = '删除';
delBtn.onclick = () => li.remove();
li.appendChild(delBtn);
list.appendChild(li);
input.value = '';
input.focus();
});案例2：Tab 切换（类名切换 + 显示隐藏）
const tabs = document.querySelectorAll('.tab-btn');
const panels = document.querySelectorAll('.tab-panel');
tabs.forEach((tab, index) => {
tab.addEventListener('click', () => {
// 移除所有 active
tabs.forEach(t => t.classList.remove('active'));
panels.forEach(p => p.classList.remove('active'));
// 添加当前
tab.classList.add('active');
panels[index].classList.add('active');
});
});案例3：实时搜索过滤
const search = document.getElementById('search');
const items = document.querySelectorAll('.item');
search.addEventListener('input', (e) => {
const term = e.target.value.toLowerCase();
items.forEach(item => {
const text = item.textContent.toLowerCase();
item.style.display = text.includes(term) ? '' : 'none';
});
});快速自测清单（掌握这些算入门）
- [ ] 能用 3 种以上方式选中元素
- [ ] 能安全地修改文本内容（textContent vs innerHTML）
- [ ] 知道什么时候用 DocumentFragment
- [ ] 能用 classList 完成 tab / active 效果
- [ ] 能动态创建 + 删除元素
- [ ] 理解事件冒泡 + 事件委托的基本原理（下一阶段重点）
你现在最想深入哪个部分？
A. 事件系统与委托
B. 性能优化（减少重排重绘）
C. 更复杂的组件实战（轮播图、模态框、拖拽）
D. 直接来一个综合小项目
告诉我你的选择，我可以继续带你写代码！
