需先用 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适合插入带标签的内容，比如动态加一个高亮，但若内容来自用户输入，必须先做 HTML 转义 - 避免反复调用
querySelector查同一个元素——查一次存变量，尤其在循环或高频回调里
const title = document.querySelector('#page-title'); title.textContent = '新页面标题'; const container = document.getElementById('list-container'); container.innerHTML = '第一项 第二项 ';通过 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 = '新条目 '; 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 操作本身不难，难的是什么时候该操作、怎么避免副作用、以及如何与状态更新节奏对齐——尤其是当内容受用户输入、异步数据、动画帧影响时，顺序和时机比语法更重要。