JavaScript是让静态网页变活的关键执行层，负责响应用户、操作DOM、调用接口；常见问题包括脚本执行过早、fetch未校验状态码、跨域未配CORS、事件中this指向异常，需依浏览器环境约束排查。
JavaScript 不是用来“构建动态网站应用”的工具，而是让静态网页变活的关键执行层——它本身不构建网站结构，但能实时响应用户、操作 DOM、调用接口、驱动交互逻辑。
为什么直接写 document.getElementById 常找不到元素？
常见错误是脚本在 HTML 元素加载前就执行了，document.getElementById 返回 null。
- 把
<script>标签放在</body>之前，确保 DOM 已解析完毕 - 或使用
DOMContentLoaded事件：document.addEventListener('DOMContentLoaded', () => { /* 此时可安全操作 DOM */ }); - 现代写法也可用
defer属性：<script src="app.js" defer></script>，浏览器会等 DOM 构建完再执行
用 fetch 请求 API 时为什么拿不到数据？
fetch 默认只检查网络是否通，不校验 HTTP 状态码；404、500 都不会抛错，容易误以为成功。
- 必须手动检查
response.ok或response.status：const res = await fetch('/api/user');<br>if (!res.ok) throw new Error(`HTTP ${res.status}`); - 记得用
await res.json()解析响应体，否则拿到的是Response对象，不是 JSON 数据 -
跨域请求失败时，控制台报错通常是
No 'Access-Control-Allow-Origin' header，这不是 JS 写错了，是后端没配 CORS
事件监听器里 this 指向不对怎么办？
在普通函数中绑定事件（如 button.addEventListener('click', handler)），handler 内的 this 默认指向触发元素——但一旦加了 bind、箭头函数或放进类方法里，行为就变了。
立即学习“Java免费学习笔记（深入）”；
- 用箭头函数可继承外层
this：el.addEventListener('click', () => this.handleClick()) - 类中定义方法时，推荐在构造函数里绑定：
this.handleClick = this.handleClick.bind(this) - 更现代的写法是用类字段语法（需编译支持）：
handleClick = () => { /* this 指向实例 */ } - 实在不确定
this，直接用事件对象：e.target或e.currentTarget
真正卡住人的往往不是语法，而是浏览器环境隐含的约束：执行时机、作用域链、异步顺序、同源策略。写 JS 时多看 Network 面板和 Console 错误，比反复查文档更快定位问题。
