script 标签写在哪？位置不对就拿不到 DOM 元素
直接把 <script></script> 放在 里，又没加 defer 或 DOMContentLoaded 监听，十有八九会遇到 Cannot read property 'xxx' of null —— 因为 DOM 还没加载完，document.getElementById 找不到元素。
- 最省心的做法：把
<script></script>放在前，确保 DOM 已就绪 - 如果必须放
，加defer属性（仅适用于外部脚本）；内联脚本只能靠DOMContentLoaded包一层 - 别用
window.onload，它等所有资源（图片、样式表）都加载完才触发，响应更慢
事件绑定写法选哪个？onclick 属性 vs addEventListener
onclick="doSomething()" 看似简单，但很快就会失控：多个逻辑要绑同一个按钮？无法移除？this 指向混乱？推荐统一用 addEventListener。
-
onclick属性只能绑定一个函数，后赋值会覆盖前一个 -
addEventListener可多次调用，支持解绑（removeEventListener），也更容易传参或用箭头函数保持作用域 - 注意：用
addEventListener绑定时，不要加括号——写btn.addEventListener('click', handleClick)，不是handleClick()
获取用户输入时，value 和 innerHTML 别混用
表单控件（<input>、<textarea></textarea>、<select></select>）一律用 .value 读写内容；普通容器（<div>、<code><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML"><img
src="https://img.php.cn/upload/skill/000/000/081/178998486916110.jpg" alt="Doc To HTML" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="overflowclass">Doc To HTML</a>
<p class="overflowclass">使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。</p>
</div>
<a rel="nofollow" href="/xiazai/skill4293" title="Doc To HTML" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>）才用 .innerHTML 或 .textContent。
- 写成
inputEl.innerHTML拿不到输入值，返回空字符串或 undefined - 用
.textContent替代.innerHTML更安全，避免 XSS 风险（除非你明确需要渲染 HTML） - 实时监听输入变化，优先用
input事件，不是change（后者只在失焦时触发）
调试报错常见三类：拼写、作用域、执行时机
内联脚本出错不报行号，Chrome 控制台只显示 VMxxx:12，定位困难。典型问题集中在：
- 变量名拼错：
documnet、getElemetById—— 浏览器不会提示，直接返回null - 函数定义在调用之后，又没用函数声明提升（function declaration 会被提升，但 function expression 不会）
- 脚本执行时 DOM 未就绪，或元素 ID 写错 / 重复 / 未渲染（比如被
v-if或条件注释控制）
建议打开浏览器开发者工具的「Sources」面板，点开页脚生成的 <script></script> 片段，设断点单步看变量值——这是最直接的排查方式。
