document.getElementById 返回 null 主因是脚本执行过早，DOM 未加载完成；应将脚本置于 </body> 前或用 DOMContentLoaded 包裹，并确保 ID 严格匹配、元素已存在。
怎么用 document.getElementById 安全取到元素
直接调用 document.getelementbyid 却返回 null，八成是脚本执行时机不对——dom 还没加载完，就急着找元素。
常见错误现象：Cannot read property 'addEventListener' of null 或操作后无反应。
- 确保脚本放在
</body>前，或用DOMContentLoaded包裹 - ID 值必须严格匹配（区分大小写、不能有空格或特殊字符）
- 不要在
iframe里用父页面的 ID 直接查，得先定位到对应contentDocument - 若元素是 JS 动态插入的，确认插入完成后再查，别依赖“写完就查”
示例：
document.addEventListener('DOMContentLoaded', () => {
const btn = document.getElementById('submit-btn');
if (btn) { // 养成判空习惯
btn.addEventListener('click', handler);
}
});
修改元素内容时，innerHTML 和 textContent 怎么选
想改文字却把整个结构清空了？或者用户输入的 <script> 被执行了？关键在语义和安全边界。
使用场景：
- 只更新纯文本（比如表单提示、状态文案）→ 用
textContent，快且防 XSS - 需要插入带标签的 HTML（如富文本片段、动态生成的按钮）→ 用
innerHTML，但必须确保内容可信 -
innerText受 CSS 影响（隐藏元素不参与），textContent不受，优先选后者
性能影响：大量文本更新时，textContent 比 innerHTML 轻量；但若要渲染复杂结构，innerHTML 一次写入比多次 appendChild 更快。
立即学习“Java免费学习笔记（深入）”；
事件监听别写在 HTML 里，用 addEventListener 替代 onclick
内联事件（如 <button onclick="doIt()">）看着省事，实际会带来维护断裂、无法解绑、作用域混乱等问题。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
为什么这样做：
- 一个元素可绑定多个同类型事件，
onclick会被覆盖 -
addEventListener支持第三个参数控制捕获/冒泡阶段 - 便于后期用
removeEventListener精确清理，避免内存泄漏 - 逻辑与结构分离，调试和测试更直接
注意点：removeEventListener 必须传入**完全相同的函数引用**，匿名函数无法移除；需用具名函数或保存句柄：
const handler = () => console.log('clicked');
btn.addEventListener('click', handler);
// … later
btn.removeEventListener('click', handler);
获取表单值别用 .value 就完事，注意元素类型差异
input、select、textarea 都有 .value，但 checkbox/radio 的行为完全不同——它们不是“有值就返回”，而是“选中才返回真实值，否则是空字符串或 undefined”。
容易踩的坑：
- checkbox 多选时，得遍历所有同名
input[type="checkbox"]，检查.checked状态 - radio 组用
document.querySelector('input[name="gender"]:checked')才能拿到当前选中项，直接读name对应节点的.value会错 -
select[multiple]的值是HTMLCollection，要用Array.from(select.selectedOptions).map(o => o.value) - 某些自定义组件（如日期选择器）可能不更新原生
.value，得查其 API 提供的取值方法
兼容性提醒：IE8- 不支持 selectedOptions，需降级用循环 + option.selected 判断。
DOM 操作看着简单，真正卡住人的往往不是语法，而是执行顺序、元素存在性、事件绑定方式这些“看不见的上下文”。写完记得多刷几次页面，尤其清缓存后测首次加载。
