script标签应放在之前；因浏览器自上而下解析html，放中未加defer/async会导致dom未就绪、getelementbyid返回null，而放前可确保dom已加载、脚本安全执行。

script 标签该放 head 还是 body 里？ 浏览器解析 HTML 是从上到下顺序执行的。如果 <script></script> 放在 里，而脚本里又写了 document.getElementById('btn') 去获取一个还没解析到的按钮，就会返回 null，后续绑定事件或操作 DOM 全部失效。

• 推荐把 <script></script> 放在 之前（即 底部）
• 如果必须放在 ，加 defer 属性：<script defer src="app.js"></script>，它会等 HTML 解析完再执行
• 别用 async 加载交互逻辑脚本，它不保证执行顺序，可能 DOM 还没就绪就运行了

直接写 script 还是外链 JS 文件？ 两者都能用，但适用场景不同：

• 写少量初始化逻辑（比如一个按钮点击弹 alert），用内联 <script>console.log('loaded');</script> 更快，少一次 HTTP 请求
• 交互逻辑超过 10 行、要复用、或涉及 DOM 操作，务必抽成单独文件（如 interactions.js），用 <script src="interactions.js"></script>
• 外链文件记得加 type="module"（如果用了 import）或确保编码一致（推荐 UTF-8，避免中文注释乱码）

点击事件绑不上？常见三类原因addEventListener 不生效，90% 出在这几个地方：

• 元素还没加载进来：检查是否脚本执行早于目标元素（见第一个副标题）
• 选择器写错：document.querySelector('.btn-submit') 却忘了 class 名是 submit-btn，或者漏了 . / #
• 事件名拼错：写成 'clickk' 或 'onlick'，正确是 'click'
• 没阻止默认行为：表单提交后页面刷新，看起来像“没反应”，加 e.preventDefault() 再调试

怎么让 JS 和 HTML 真正联动起来？ 光有 <script></script> 标签不够，关键在“钩子”——HTML 要提供可识别、可预测的接入点：

• 给要操作的元素加明确的 id 或 class，别依赖结构位置（比如不用 document.getElementsByTagName('button')[0]）
• 避免在 HTML 里写 onclick="doSomething()"，它把逻辑和结构耦合，不利于维护和测试
• 用自定义 data- 属性传参数：<button data-action="delete" data-id="123">删</button>，JS 里用 el.dataset.action 和 el.dataset.id 拿值
• 如果页面由后端模板渲染，确保 JS 在数据注入完成后执行，而不是在静态 HTML 里硬编码 ID 值

交互效果不是靠堆代码实现的，而是靠清晰的触发点、稳定的节点获取方式、以及对执行时机的控制。最容易被忽略的是：DOM 就绪状态比语法正确更重要。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！