JavaScript操作DOM是刚性需求，需掌握querySelector/querySelectorAll区别、innerHTML与textContent安全选择、事件监听中this指向、动态创建元素的正确方式及DocumentFragment优化。
JavaScript 操作 DOM 元素不是“要不要学”的问题，而是“不掌握就写不出可用交互”的刚性需求。核心在于：选对方法、避开常见陷阱、理解返回值类型差异。
document.querySelector() 和 document.querySelectorAll() 怎么选
这两个是现代最常用的元素获取方式，区别不在“功能强弱”，而在“返回值类型”和“是否支持伪类”：
-
document.querySelector()返回第一个匹配的Element，没找到返回null—— 适合操作单个按钮、表单字段或容器 -
document.querySelectorAll()返回NodeList（类数组，但不是 Array），没找到返回空NodeList—— 适合批量操作同类节点，比如所有.item - 两者都支持完整 CSS 选择器语法，包括
:hover（只用于匹配，不触发状态）、:nth-child()、属性选择器如[data-id="123"] - ⚠️ 注意：
NodeList不能直接用.forEach()（老版本 Safari 不支持），建议转成数组：Array.from(document.querySelectorAll('.btn'))或用for...of
innerHTML vs textContent：改内容时别踩 XSS 和性能坑
表面都是“改文字”，实际行为天差地别：
-
element.innerHTML = '<strong>Hello</strong>'会解析 HTML，插入真实 DOM 节点 —— 有 XSS 风险，且触发重排重绘，性能开销大 -
element.textContent = '<strong>Hello</strong>'只当纯文本处理，自动转义为 <code><—— 安全、快，适合显示用户输入内容 - 如果必须插 HTML，先做白名单过滤（如只允许
<b></b>、<i></i>），再用innerHTML；否则一律优先用textContent
addEventListener() 绑事件时，this 指向和事件对象容易混淆
用箭头函数或传统函数绑定事件，this 行为完全不同：
立即学习“Java免费学习笔记（深入）”；
- 传统函数：
btn.addEventListener('click', function(e) { console.log(this); })→this是触发事件的btn元素 - 箭头函数：
btn.addEventListener('click', (e) => { console.log(this); })→this是外层作用域的this（通常是window或undefined） - 事件对象
e始终存在，常用e.target（实际点击的元素）和e.currentTarget（绑定事件的元素），二者在事件委托时可能不同 - 移除事件必须用相同引用：
const handler = () => {}; el.addEventListener('click', handler); el.removeEventListener('click', handler);
动态创建元素别直接拼接字符串
用 innerHTML += 'xxx' 看似简单，实则危险且低效：
- 每次赋值都会销毁并重建整个子树，已绑定的事件监听器全部丢失
- 字符串拼接易出 XSS，尤其含用户数据时
- 推荐方案：
document.createElement()+element.appendChild()，或更简洁的element.insertAdjacentHTML('beforeend', htmlStr)（仅限可信 HTML） - 批量插入多个节点？用
DocumentFragment减少重排：const frag = document.createDocumentFragment(); items.forEach(item => frag.appendChild(createItemEl(item))); parent.appendChild(frag);
DOM 操作真正难的不是语法，而是对“节点生命周期”“事件流阶段”“引用是否还有效”的持续判断。比如 querySelector 返回的元素被父节点 remove() 后，它依然存在，只是脱离文档流 —— 这种隐式状态最容易在复杂交互中引发静默错误。
