JavaScript交互关键在DOM操作、事件响应、异步行为三链条：确保元素存在再操作，用addEventListener动态绑定事件，fetch需手动检查res.ok并捕获异常。
JavaScript 基础知识不是靠“学完语法”就能写交互的，关键在理解 DOM 操作、事件响应 和 异步行为 这三个真实网页场景里的核心链条。
从 document.querySelector 开始操作真实元素
很多初学者卡在“代码写了但页面没反应”，根本原因是没确认元素是否真的被选中。直接用 console.log 验证返回值比猜更可靠：
const btn = document.querySelector('#submit-btn');
console.log(btn); // 如果是 null，说明 ID 写错、脚本执行过早或元素还没加载
- 确保脚本放在
</body>前，或使用DOMContentLoaded事件 -
querySelector返回单个元素，querySelectorAll返回 NodeList（不是数组，需用Array.from()或扩展运算符转换才能用map/forEach） - ID 选择器最快，但别滥用；类名和属性选择器（如
[data-action="save"]）更利于解耦
用 addEventListener 绑定事件，别写 onclick 属性
内联事件（如 <button onclick="handle()>）会让逻辑散落在 HTML 里，调试和复用都困难。真实项目中必须用 JS 动态绑定：
document.querySelector('#search-input').addEventListener('input', function(e) {
console.log(e.target.value); // 实时获取输入内容
});
-
input事件比change更适合搜索框类场景（后者只在失焦或回车时触发） - 避免重复绑定：同一个元素多次调用
addEventListener同一类型事件，会累积多个监听器 - 需要移除时，必须传入**同一个函数引用**，匿名函数无法被清除
理解 fetch 的 Promise 链和常见错误处理
fetch 不会在 HTTP 状态码异常（如 404、500）时自动 reject，这是最容易漏掉的坑：
立即学习“Java免费学习笔记（深入）”；
fetch('/api/users')
.then(res => {
if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
return res.json();
})
.then(data => console.log(data))
.catch(err => console.error('请求失败:', err.message));
-
res.ok判断状态码是否在 200–299 范围，res.status才是具体数字 - 网络中断、跨域失败、CORS 配置错误等会直接进入
catch，不会进then - 不要省略
.catch()—— 未捕获的 Promise rejection 会在控制台报错且难以定位
真正卡住人的从来不是语法，而是 DOM 加载时机、事件冒泡路径、Promise 的 pending 状态这些看不见的流程。写一行代码前，先问自己：它在什么时机执行？作用在哪个节点？失败了会静默还是报错？
