JavaScript操作DOM需先获取元素再操作；document.getElementById最常用因其按id精确匹配、返回单个元素且兼容IE6+；querySelector返回首个匹配元素，querySelectorAll返回静态NodeList；修改内容优先用textContent防XSS；addEventListener需防重复绑定，推荐once选项或事件委托。
JavaScript 操作 DOM 元素的核心是先「拿到元素」，再「调用方法或修改属性」。没有统一“万能写法”，选错获取方式或忽略节点状态，代码大概率静默失败。
document.getElementById 为什么最常用？
因为它是唯一按 id 精确匹配、返回单个元素、且兼容性覆盖 IE6+ 的 API。只要页面中 id 唯一，就几乎不会出错。
常见错误：传入的字符串漏了 #（那是 CSS 选择器写法，getElementById 不要加）；或者 id 含空格/特殊字符但没转义（实际应避免这类 id）。
使用建议：
立即学习“Java免费学习笔记（深入）”；
-
id必须全局唯一，重复时只返回第一个匹配元素 - 执行时机必须在对应元素已存在于 DOM 中，否则返回
null - 适合操作有明确业务标识的元素，比如
querySelector 和 querySelectorAll 区别在哪？
querySelector返回第一个匹配的元素，querySelectorAll返回NodeList（类数组，不可直接用forEach，需转数组或用for...of）。它们支持完整 CSS 选择器语法，灵活性高，但性能略低于
getElementById，且 IE8+ 才支持（IE8 仅支持部分选择器）。容易踩的坑：
- 选择器写错导致返回空结果，但不报错——建议先用浏览器控制台
$$("xxx")测试选择器是否有效 -
querySelectorAll返回的是静态快照，后续 DOM 变化不影响它；而getElementsByClassName返回的是实时集合，容易引发无限循环 - 伪类如
:hover在 JS 中无法通过querySelector获取（它只匹配当前 DOM 结构，不反映状态）
修改元素内容和属性该用 innerHTML 还是 textContent？
innerHTML解析并渲染 HTML 字符串，textContent只当纯文本处理。安全性和用途截然不同。使用场景判断：
- 需要插入带标签的内容（如从后端返回富文本片段），且已确保内容可信 → 用
innerHTML - 仅更新文字，或内容来自用户输入 → 必须用
textContent，避免 XSS - 想清空元素所有子节点 →
element.innerHTML = ""更直观，但element.textContent = ""更快且无解析开销
注意：
innerText受 CSS 影响（如display: none的文本不计入），行为不一致，生产环境尽量避开。监听点击事件时，addEventListener 怎么避免重复绑定？
重复调用
addEventListener同一个函数，会绑定多个相同监听器，触发时执行多次——这是最常见的内存泄漏和逻辑错乱源头。解决办法：
- 绑定前先用
removeEventListener清理（需保存原函数引用，不能用匿名函数） - 利用
{ once: true }选项，自动在首次触发后解绑 - 对动态生成的元素，优先用事件委托：
document.addEventListener("click", handler)，在handler中用event.target判断具体目标
特别注意：
onclick属性赋值（如el.onclick = fn）会覆盖之前绑定的函数，看似“不会重复”，但破坏了事件监听的可组合性，不推荐用于复杂交互。DOM 操作真正难的不是语法，而是时刻意识到：元素可能不存在、尚未加载、已被移除、或被其他脚本修改过。每次操作前加一句
if (el)不是啰嗦，是底线。 - 选择器写错导致返回空结果，但不报错——建议先用浏览器控制台
