脚本放在</body>前最省心，天然保证DOM就绪，无需DOMContentLoaded或defer；避免内联onclick，统一用addEventListener绑定事件，支持多监听、精准this指向和方便移除。
直接在 index.html 里加交互功能，关键不是“能不能写”，而是“什么时候执行”和“选不选得到元素”——90% 的失败都卡在这两点上。
脚本放在 <body> 底部最省心
浏览器从上到下解析 HTML，如果 <script> 放在 <head> 里，它会立刻执行，但此时 DOM 还没生成，document.getElementById 或 document.querySelector 必然返回 null。
解决办法很简单：把 <script> 标签挪到 </body> 前：
<body>
<button id="my-btn">点我</button>
<script>
const btn = document.getElementById("my-btn");
btn.addEventListener("click", () => alert("生效了"));
</script>
</body>
- 不用等
DOMContentLoaded，也不用加defer，天然保证 DOM 就绪 - 适合小项目、原型或单页 demo，逻辑清晰、调试直观
- 如果脚本体积大或依赖网络（比如加载第三方库），再考虑
async或defer
addEventListener 比 onclick 属性更可靠
别在 HTML 标签里写 onclick="doSomething()"。这种内联写法会让行为和结构耦合，改逻辑要翻 HTML，复用性差，还容易因作用域问题报 ReferenceError。
立即学习“Java免费学习笔记（深入）”；
统一用 JS 绑定事件：
const btn = document.querySelector("#my-btn");
btn.addEventListener("click", function() {
this.classList.toggle("active");
});
- 一个元素可绑定多个
click监听器，onclick会被后设的覆盖 - 能用
this精准指向当前触发元素，不用反复查 ID - 移除监听器也方便：
btn.removeEventListener("click", handler)
动态更新内容优先用 textContent 或 innerHTML，别碰 style
想改文字？别用 element.style.color = "red"；想换内容？别拼接字符串塞进 innerHTML 后不清理旧节点。
常见操作对应推荐方式：
- 纯文本替换 → 用
element.textContent = "新文案"（安全、快、防 XSS） - 含 HTML 片段 → 用
element.innerHTML = "<strong>加粗</strong>"，但确保内容可信 - 切换显示/隐藏 → 改
class配合 CSS 的display或opacity，别直接设element.style.display = "none" - 批量更新列表 → 先建
documentFragment或用innerHTML一次性写入，避免循环中反复操作 DOM
移动端 click 延迟和 hover 不一致必须处理
在 iOS Safari 上，click 有约 300ms 延迟（为双击缩放留判断时间），:hover 在触摸设备上基本不可靠——首次点击才触发，之后才“记住”该元素可 hover。
实际做法：
- 按钮类交互一律用
click+classList.toggle，不要依赖mouseenter - 需要快速响应？给按钮加
touchstart事件，或全局加<meta name="viewport" content="width=device-width, user-scalable=no">关闭双击缩放（慎用） - CSS 中的
:hover只作视觉增强，且必须配合cursor: pointer给用户明确反馈 - 关键操作（如提交、删除）绝不只靠 hover 触发
DOM 存在性检查、transition 写在默认类里、移动端事件延迟——这些不是“进阶技巧”，是上线前必须确认的硬性条件。
