Web API 是浏览器提供的原生接口集合，非 JavaScript 语言本身；包括 DOM 操作、fetch、localStorage 等，脱离浏览器（如 Node.js）即不可用；需注意 null 安全、NodeList 转换、样式修改方式、fetch 错误处理、存储序列化及 API 兼容性。
Web API 不是 JavaScript 语言本身的一部分，而是浏览器提供的、供 JS 调用的原生接口集合；它让 JS 能操作 DOM、发起网络请求、管理存储、控制媒体等——离开浏览器环境（比如 Node.js），这些 API 就不可用。
DOM 操作离不开 document 和 Element 接口
几乎所有前端交互都从这里开始。注意：获取不到元素时 querySelector 返回 null，直接调用 .addEventListener 会报 TypeError: Cannot read property 'addEventListener' of null。
-
document.querySelector('.btn')比getElementById更灵活，但只返回第一个匹配项 - 批量操作要用
document.querySelectorAll('.item')，它返回NodeList，不是数组，不能直接用map，得先转：Array.from(nodeList).map(...)或用forEach - 修改样式优先用
element.classList.add('active')，而不是直接拼element.style.cssText，避免覆盖其他内联样式
发 HTTP 请求首选 fetch()，但别忘了它不拒绝 HTTP 错误状态码
fetch() 只在网络失败（如断网、DNS 错误）时 reject，而 404、500 这类响应仍算“成功”，需手动检查 response.ok 或 response.status。
阿拉丁·前端工程工坊把「前端只会写页面、规范停在文档里、脚手架手敲、构建靠抄、性能靠猜、可访问性靠忘」从「手动搭项目、抄配置、肉眼查规范」升级成一条本地工具链——多框架脚手架生成(React/Vue3/Svelte + Vite)、可复用组件生成(Props 类型+样式+示例)、规范落地检查(lint-lite:命名/未用变量/console残留/TS any/目录结构)、构建配置生成与产物体积预算、性能审计(依赖体积/重复/懒加载/Lighthouse 清单)、可访问性(a11y)校验(alt/aria
fetch('/api/user')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error: ${response.status}`);
}
return response.json();
})
.then(data => console.log(data))
.catch(err => console.error('Fetch failed:', err));
- 发送 JSON 数据记得加
headers: { 'Content-Type': 'application/json' } - 需要 cookie 时必须显式传
credentials: 'include'，否则默认不带 - 超时需自行封装，
fetch()原生不支持timeout选项
localStorage 和 sessionStorage 只能存字符串
试图存对象会自动调用 toString()，结果变成 [object Object]。必须用 JSON.stringify() 和 JSON.parse() 手动编解码。
const user = { id: 123, name: 'Alice' };
localStorage.setItem('user', JSON.stringify(user));
const saved = localStorage.getItem('user');
const parsed = saved ? JSON.parse(saved) : null;
- 超出容量（通常 5–10MB）会抛
QuotaExceededError，需try/catch -
sessionStorage关闭标签页即清空，localStorage持久保存，但不同协议/端口/子域间完全隔离 - 敏感信息（如 token）别存这里，容易被 XSS 盗取
Web API 的边界常被忽略：比如 setTimeout 和 Promise 是 JS 引擎能力，而 navigator.geolocation、AudioContext、IntersectionObserver 才是真正的 Web API——它们依赖浏览器实现，行为和兼容性差异大，查 MDN 时务必看 “Browser compatibility” 表格里的具体版本支持情况。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
