Web API是浏览器提供的可被JS调用的接口集合，核心包括DOM（节点操作与事件绑定）、Fetch（网络请求需手动处理状态与凭证）、Storage（localStorage/sessionStorage/IndexedDB分工明确）、Geolocation与Clipboard（权限敏感，需检测上下文）。
DOM API：选元素、改内容、绑事件，90% 的页面交互都靠它
这是你每天写 JS 最先接触也最易踩坑的一层。核心不是“学多少方法”，而是理解「节点」和「实时性」。
-
document.querySelector()和document.querySelectorAll()是首选，但注意：前者只返回第一个匹配元素（null时直接报错），后者返回的是「伪数组」（NodeList），不能直接用map或forEach——得先转成真数组：[...nodeList].forEach(...) -
innerText只读文本，会忽略标签、折叠空白；innerHTML读写 HTML 结构，但直接拼接字符串有 XSS 风险，动态插入内容优先用textContent或createElement+appendChild - 事件绑定别再用
onclick="..."或element.onclick = fn，一律用element.addEventListener('click', handler)，否则无法解绑、不支持捕获阶段、多个监听器会被覆盖
Fetch API：取代 XMLHttpRequest 的现代网络请求方式
它默认不带 cookie，4xx/5xx 不抛错，JSON 解析要手动调用 response.json() —— 这三点是新手最常漏掉的。
- 发送带凭证的请求必须显式加
credentials: 'include'，否则跨域登录态丢失 -
fetch()只在网络错误（如断网、DNS 失败）时 reject，HTTP 状态码 404/500 仍走then分支，需手动判断：if (!response.ok) throw new Error(response.status) - 上传文件用
FormData对象即可，不用设Content-Type头（浏览器会自动加 boundary）
fetch('/api/user', {
method: 'POST',
credentials: 'include',
body: JSON.stringify({ name: 'Alice' }),
headers: { 'Content-Type': 'application/json' }
})
.then(r => r.json())
.catch(err => console.error('网络或解析失败:', err));
Storage API：localStorage / sessionStorage / IndexedDB 的分工很明确
别把 localStorage 当数据库用。它只有字符串键值对、同步阻塞主线程、无事务、最大约 5–10MB，仅适合存用户偏好、主题色、临时 token。
-
sessionStorage页面关闭即清空，适合单次流程数据（如表单草稿、多步向导状态） - 要存大量结构化数据（如离线消息、缓存图片元信息），必须上
IndexedDB—— 它是异步、支持索引、可存二进制，但 API 极其繁琐，建议用封装库如idb - 所有 Storage 写入都可能抛
QuotaExceededError，尤其在 iOS Safari 隐私模式下，务必包try/catch
Geolocation & Clipboard API：权限敏感型 API，行为不可预测是常态
它们不报错，但经常「静默失败」：用户拒权、浏览器禁用、HTTPS 缺失、iframe 沙箱限制……调试时第一反应不该是代码错，而是检查上下文。
立即学习“Java免费学习笔记（深入）”；
-
navigator.geolocation.getCurrentPosition()成功回调里才能拿到坐标，失败回调的error.code才是关键：1（用户拒权）、2（定位不可用）、3（超时） -
navigator.clipboard.writeText()必须在用户手势触发的上下文中调用（比如 click 事件内），否则直接拒绝，且 Safari 目前仍需document.execCommand('copy')回退 - 这类 API 建议封装一层「能力检测 + 权限申请 + 错误映射」，避免业务逻辑里散落一堆条件判断
