HTML与JavaScript交互基础教程

本文深入解析了HTML与JavaScript交互中的五大核心陷阱：脚本执行时机不当导致document.getElementById返回null、innerHTML与textContent的安全与性能抉择、内联事件的维护隐患及addEventListener的正确用法、表单元素（尤其是checkbox/radio/select）取值的差异化逻辑，以及DOM操作中易被忽视的上下文依赖。通过真实错误案例、可复用代码示例和兼容性提醒，帮助开发者避开“看似简单却反复踩坑”的常见雷区，真正写出健壮、安全、可维护的前端交互逻辑。

怎么用 document.getElementById 安全取到元素

直接调用 document.getElementById 却返回 null，八成是脚本执行时机不对——DOM 还没加载完，就急着找元素。

常见错误现象：Cannot read property 'addEventListener' of null 或操作后无反应。

• 确保脚本放在 前，或用 DOMContentLoaded 包裹
• ID 值必须严格匹配（区分大小写、不能有空格或特殊字符）
• 不要在 iframe 里用父页面的 ID 直接查，得先定位到对应 contentDocument
• 若元素是 JS 动态插入的，确认插入完成后再查，别依赖“写完就查”

示例：

document.addEventListener('DOMContentLoaded', () => {
  const btn = document.getElementById('submit-btn');
  if (btn) { // 养成判空习惯
    btn.addEventListener('click', handler);
  }
});

修改元素内容时，innerHTML 和 textContent 怎么选

想改文字却把整个结构清空了？或者用户输入的