JavaScript 是让静态网页变动态的关键行为层语言，负责响应操作、修改 DOM、发起请求等；需确保脚本在元素后加载或监听 DOMContentLoaded，用 addEventListener 绑定事件，优先用 textContent 修改内容，fetch 需手动检查 response.ok 并处理异常。
JavaSc
怎么让按钮点击后显示新内容
这是最典型的入门场景：用户点一下，页面局部更新，不刷新整个页面。
- 必须确保
script标签在 HTML 元素之后加载，或使用DOMContentLoaded事件，否则document.getElementById找不到元素 - 给按钮加
id="myBtn"，再用addEventListener("click", ...)绑定逻辑，别直接写onclick="..."内联脚本 - 要修改内容，优先用
textContent（安全）而非innerHTML（有 XSS 风险），除非你明确需要插入 HTML
document.getElementById("myBtn").addEventListener("click", function() {
document.getElementById("result").textContent = "按钮被点了";
});
为什么改了 DOM 却看不到变化
常见于异步操作后直接操作节点，但目标元素还没加载完成，或用了错误的选择器。
- 检查浏览器控制台是否报错
TypeError: Cannot set property 'textContent' of null，说明getElementById返回null - 确认元素 ID 拼写和大小写完全一致；HTML 中 ID 不区分大小写，但 JS 中是严格区分的
- 如果元素由框架（如 React）或模板引擎动态生成，原生 JS 可能查不到——得等渲染完成后再执行，或用
MutationObserver
fetch 请求失败却没提示
fetch 默认只在网络断开时 reject，HTTP 错误状态码（如 404、500）仍算 “success”，必须手动判断 response.ok 或 response.status。
- 忘记
await response.json()就直接用数据？会得到一个Promise对象，不是真实数据 - 没加
try/catch处理网络异常，导致错误静默吞掉 -
跨域请求被拦截时，控制台报
No 'Access-Control-Allow-Origin' header，这不是 JS 写错了，是服务端没配 CORS
async function loadData() {
try {
const res = await fetch("/api/data");
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
document.getElementById("data").textContent = JSON.stringify(data);
} catch (err) {
console.error("加载失败：", err.message);
}
}
真正难的从来不是写几行 addEventListener 或 fetch，而是理解执行时机、作用域、异步流和浏览器环境限制——比如 setTimeout 的延迟不准、localStorage 的同步阻塞、移动端 touch 事件与 click 的触发差异。这些细节不踩一遍坑，很难写出稳定可用的交互逻辑。
