需先用 getElementById 或 querySelector 获取元素，再通过 textContent（安全纯文本）或 innerHTML（含HTML，需转义）修改内容；推荐缓存查询结果、用 classList 控制样式、事件委托处理动态元素、批量读写DOM以提升性能。
用 document.getElementById 或 querySelector 获取元素再修改内容
想改网页上某段文字或 HTML，得先拿到对应 DOM 节点。最常用的是 document.getElementById（ID 唯一、快）和 document.querySelector（支持 CSS 选择器、灵活）。拿到节点后，直接改 textContent（纯文本，防 XSS 安全）或 innerHTML（含 HTML，注意转义）。
-
textContent适合替换标题、提示语等纯文本，不会触发 HTML 解析，性能好且安全 -
innerHTML适合插入带标签的内容，比如动态加一个<span class="highlight">高亮</span>，但若内容来自用户输入，必须先做 HTML 转义 - 避免反复调用
querySelector查同一个元素——查一次存变量，尤其在循环或高频回调里
const title = document.querySelector('#page-title');
title.textContent = '新页面标题';
const container = document.getElementById('list-container');
container.innerHTML = '<li>第一项</li><li>第二项</li>';
通过 element.style 和 classList 控制样式
改样式有两种主流方式：内联样式（element.style.xxx）和类名切换（element.classList）。前者适合临时、单次、计算型样式（比如根据数据算出 left 值）；后者更推荐用于状态控制（如“激活”“禁用”“加载中”），利于 CSS 维护和复用。
-
element.style.color = 'red'—— 注意 CSS 属性名转驼峰：background-color→backgroundColor，font-size→fontSize -
element.classList.add('active')/.remove('hidden')/.toggle('loading')—— 支持多个类名，如.add('a', 'b', 'c') - 别直接赋值
element.className = 'new'，会覆盖所有已有类；要用classList增量操作
const btn = document.querySelector('button');
btn.style.backgroundColor = '#007bff';
btn.style.padding = '8px 16px';
btn.classList.add('btn-primary', 'is-clicked');
btn.classList.remove('disabled');
动态添加/删除元素时注意事件绑定和内存泄漏
用 appendChild、insertAdjacentHTML 或 innerHTML += 添加新节点后，如果这些节点需要响应点击等事件，不能靠重新绑定全部监听器——容易重复绑定或漏绑。推荐用事件委托（event delegation）或确保每次只绑一次。
- 用父容器监听，再用
e.target.matches('.dynamic-btn')判断是否命中目标，比给每个新按钮单独addEventListener更轻量 - 避免用
innerHTML +=追加内容——它会销毁并重建整个子树，已绑定的事件监听器、输入框焦点、自定义属性都会丢失 - 用
document.createElement+appendChild或insertAdjacentElement更可控，也方便后续引用和清理
const list = document.getElementById('item-list');
list.addEventListener('click', e => {
if (e.target.matches('button.delete')) {
e.target.closest('li').remove();
}
});
// ✅ 推荐：创建并插入
const newItem = document.createElement('li');
newItem.innerHTML = '<span>新条目</span> <button class="delete">删</button>';
list.appendChild(newItem);
修改 DOM 后浏览器重排重绘的性能影响
频繁读写 DOM 属性（比如循环里反复取 offsetHeight 再设 style.width）会强制浏览器同步计算布局，导致卡顿。关键原则是：读批量读，写批量写，把读写操作分开。
立即学习“Java免费学习笔记（深入）”；
- 要读多个布局信息（
offsetTop、clientWidth等），尽量一次性读完，不要夹在写操作中间 - 要改多个样式，优先用
className或classList切换预设 CSS 类，而不是逐个设style.xxx - 大量 DOM 变动时，考虑用
DocumentFragment先离线组装，再一次性挂载
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const item = document.createElement('div');
item.textContent = `条目 ${i}`;
fragment.appendChild(item);
}
list.appendChild(fragment); // 仅一次真实 DOM 插入
实际项目里，DOM 操作本身不难，难的是什么时候该操作、怎么避免副作用、以及如何与状态更新节奏对齐——尤其是当内容受用户输入、异步数据、动画帧影响时，顺序和时机比语法更重要。 
