document.querySelector 是获取单个元素的首选方法，支持完整 CSS 选择器语法，但需判空以防 TypeError；动态元素要确保插入 DOM 后再查询，避免宽泛选择器。
如何用 document.querySelector 精准获取单个元素
绝大多数场景下，document.querySelector 是首选——它支持完整 CSS 选择器语法，比 getElementById 更灵活，又比 getElementsByClassName 返回值更可控（只返回第一个匹配项，避免误操作）。
常见错误是忽略返回 null 的情况：当选择器没匹配到任何元素时，它不会报错，但后续调用 .innerText 或 .addEventListener 就会触发 TypeError: Cannot read property 'xxx' of null。
- 始终先判断存在性：
const el = document.querySelector('#submit-btn'); if (el) { el.disabled = true; } - 避免用过于宽泛的选择器，比如
div或*[data-id]，容易在 DOM 变动后意外选中错误元素 - 动态生成的元素需确保查询时机正确——不能在元素插入 DOM 前就执行
querySelector
批量操作元素时，为什么 document.querySelectorAll 返回的是 NodeList 而不是数组
querySelectorAll 返回的是静态 NodeList，它看起来像数组（有 length、支持 [i] 访问），但没有 map、forEach 等方法（除非是现代浏览器且未禁用原型）。直接写 document.querySelectorAll('input').forEach(...) 在旧版 Safari 或 IE 中会报错。
- 安全遍历方式：用
Array.from()转换：Array.from(document.querySelectorAll('input')).forEach(input => input.value = '') - 或用传统
for循环：const inputs = document.querySelectorAll('input'); for (let i = 0; i - 注意：它不响应 DOM 变化——即使之后新增了匹配元素，该 NodeList 也不会更新
修改元素内容时，innerHTML 和 textContent 到底该用哪个
核心区别在于是否解析 HTML 字符串：innerHTML 会把字符串当作 HTML 渲染，textContent 当作纯文本。这直接影响安全性与性能。
立即学习“Java免费学习笔记（深入）”；
- 用户输入内容必须用
textContent，否则可能触发 XSS：el.textContent = userInput（安全） vsel.innerHTML = userInput（危险） - 需要插入带标签的结构（如从模板拼接）才用
innerHTML，但务必确保来源可信；若需动态渲染，优先考虑template标签 +content.cloneNode(true) -
textContent读取时会合并所有文本节点并忽略标签，适合提取纯文本；innerHTML读取时返回原始 HTML 字符串，包含标签
事件绑定别再用 onclick 属性，改用 addEventListener
el.onclick = handler 是早期写法，最大问题是：同一个元素只能绑定一个 onclick 处理函数，后赋值会覆盖前一个；而 addEventListener 支持多次调用，互不干扰。
- 移除监听必须用对应引用：
el.addEventListener('click', fn); ... el.removeEventListener('click', fn);—— 匿名函数无法被移除 - 注意事件冒泡影响：表单内多个按钮共用父容器时，用
e.target判断真实点击元素，而非硬写el.addEventListener到每个子节点 - 动态添加的元素需用事件委托：
document.addEventListener('click', e => { if (e.target.matches('.dynamic-btn')) { /* 处理 */ } })
DOM 操作最常被忽略的其实是「时机」：脚本运行时 DOM 是否已就绪？DOMContentLoaded 事件比 window.onload 更早触发，且不等待图片加载，应作为默认守则；另外，频繁修改同一元素的多个属性（如同时改 className、style.color、textContent）会触发多次重排，能合并尽量合并。
