script 放在底部更安全，因浏览器自上而下解析 HTML，若 script 在 head 中调用未渲染的 DOM 元素会返回 null，导致事件绑定失败；移至 body 底部或用 DOMContentLoaded 事件可解决。
为什么 script 放在 底部比 更安全
因为浏览器解析 HTML 是从上到下顺序执行的，script 如果放在
document.getElementById('btn') 这类 DOM 查询，此时页面还没解析到那个按钮元素，结果就是返回 null，后续绑定事件或操作直接失败。常见错误现象：TypeError: Cannot add property onclick, object is not extensible 或控制台报 Cannot read property 'addEventListener' of null。
- 把
<script></script>标签移到前是最简单有效的解法 - 若必须放 ，改用
DOMContentLoaded事件包裹逻辑：document.addEventListener('DOMContentLoaded', () => { /* 你的代码 */ }); - 避免使用
window.onload——它要等所有资源（图片、CSS）加载完才触发，延迟更明显
document.querySelector 和 document.getElementById 的选择差异
两者都能取元素，但行为和适用场景不同：前者靠 CSS 选择器，灵活但慢一点；后者靠 ID，快且唯一，但要求 ID 全局不重复。
容易踩的坑：querySelector 返回第一个匹配项，如果页面有多个 <button class="submit"></button>，它只拿到第一个；而 getElementById 遇到重复 ID 时行为未定义（多数浏览器取第一个，但不符合 HTML 规范）。
立即学习“Java免费学习笔记（深入）”；
- 优先用
getElementById处理单个关键控件（如提交按钮、主输入框） - 用
querySelector处理带条件的查找，比如document.querySelector('form#login input[name="email"]') - 批量操作用
querySelectorAll，它返回 NodeList，需用forEach遍历
addEventListener 绑定 click 时 this 指向丢失问题
写成 btn.addEventListener('click', function() { this.style.color = 'red'; }) 看似没问题，但如果这个函数被抽出来复用，this 就不再指向按钮——尤其在箭头函数或作为回调传入时。
根本原因是传统函数的 this 由调用方式决定，而事件监听器内部调用时，this 默认是触发该事件的元素；一旦脱离上下文，就变成 window 或 undefined（严格模式）。
- 最稳妥写法：用事件对象
e.target明确取触发元素，btn.addEventListener('click', (e) => e.target.style.color = 'red'); - 如果必须用命名函数，绑定时用
.bind(btn)或改用箭头函数闭包捕获 - 避免直接赋值
btn.onclick = handler，它不支持多监听器，且覆盖已有逻辑
表单 input 实时验证该监听 input 还是 blur
input 事件每敲一个键就触发，适合做实时反馈（如密码强度提示）；blur 是失去焦点时触发，适合最终校验（如邮箱格式确认）——选错会带来性能或体验问题。
性能影响明显：input 在中文输入法下可能频繁触发（每选一个候选词都算一次），没节流的话会导致卡顿；blur 则只在用户明确离开字段时执行，更轻量。
- 邮箱/手机号等格式验证，推荐用
blur+ 提交前二次检查 - 搜索框自动补全、字符计数这类场景，用
input，但务必加setTimeout防抖 - 不要混用：
oninput内联属性已过时，一律走addEventListener
DOM 加载时机、选择器精度、事件上下文、输入时机——这四个点串起来，才是真实项目里最容易出错又最难定位的交互链。写的时候多看一眼控制台报错来源，比翻文档更快。
