前端API汇总

Web API

分类	核心作用	典型接口 / 对象	使用场景示例	所属环境
JavaScript 内置 API	提供编程语言基础功能（数据处理、逻辑运算等）	`String`（`slice()`、`toUpperCase()`）、`Array`（`map()`、`filter()`）、`Object`（`keys()`）、`Date`（`getFullYear()`）、`Math`（`random()`）、`JSON`（`parse()`、`stringify()`）	– 用 `Array.map()` 处理数组数据- 用 `JSON.parse()` 解析接口返回的 JSON 字符串- 用 `Math.random()` 生成随机数	独立于浏览器（Node.js/ 浏览器均支持）
DOM API	操作网页文档的结构、内容和样式	`document`（`querySelector()`、`createElement()`）、`element`（`appendChild()`、`setAttribute()`）、`Event`（`addEventListener()`）	– 通过 `document.getElementById()` 获取元素- 用 `element.classList.add()` 添加 CSS 类- 用 `addEventListener()` 绑定点击事件	浏览器环境（Web API 子集）
BOM API	操作浏览器窗口及基础功能	`window`（`alert()`、`scrollTo()`）、`location`（`href`、`reload()`）、`history`（`back()`、`pushState()`）、`navigator`（`userAgent`）	– 用 `window.alert()` 弹出提示框- 通过 `location.href` 跳转页面- 用 `history.back()` 回退历史	浏览器环境（Web API 子集）
网络 API	处理网络请求与数据交互（含 Socket 实时通信）	`fetch()`、`XMLHttpRequest`、`WebSocket`（Socket 全双工通信）、`AbortController`	– 用 `fetch()` 调用后端接口- 用 `WebSocket` 实现 Socket 实时通信（如在线聊天、实时数据推送）- 用 `AbortController` 取消请求	浏览器环境（Web API 子集）
存储 API	在浏览器中存储数据（本地 / 会话）	`localStorage`、`sessionStorage`、`Cookie`、`IndexedDB`	– 用 `localStorage` 存储用户偏好设置- 用 `IndexedDB` 存储大量结构化数据	浏览器环境（Web API 子集）
设备 API	与用户设备硬件交互	`navigator.geolocation`（地理位置）、`MediaDevices`（摄像头 / 麦克风）、`BatteryStatus`（电池状态）	– 获取用户位置并显示在地图上- 调用摄像头进行视频拍摄- 检测设备电池电量	浏览器环境（Web API 子集）
时间 / 动画 API	处理时间控制与动画效果	`setTimeout()`、`setInterval()`、`requestAnimationFrame()`、`performance`	– 用 `requestAnimationFrame()` 实现平滑动画- 用 `performance` 计算页面加载时间	浏览器环境（Web API 子集）
音频 / 视频 API	处理音视频播放与控制	`HTMLMediaElement`、`MediaRecorder`、`Web Audio API`	– 自定义视频播放器（控制播放 / 暂停）- 用 `MediaRecorder` 录制音频	浏览器环境（Web API 子集）
安全 / 权限 API	管理浏览器权限与安全相关功能	`Permissions API`、`Content Security Policy (CSP)`、`Crypto`（加密）	– 检测用户是否授予摄像头权限- 用 `Crypto` 对敏感数据加密	浏览器环境（Web API 子集）
Canvas API	绘制 2D/3D 图形、动画及图像处理	`HTMLCanvasElement`、`CanvasRenderingContext2D`、`WebGLRenderingContext`（3D）	– 用 2D 上下文绘制图表、签名板- 用 WebGL 实现 3D 游戏场景- 实时处理摄像头采集的图像	浏览器环境（Web API 子集）
HTML API	操作 HTML 元素特性与行为（原生组件增强）	`HTMLInputElement`（表单输入）、`HTMLDialogElement`（对话框）、`HTMLDetailsElement`（折叠面板）、`IntersectionObserver`（元素可见性检测）	– 用 `HTMLDialogElement` 实现原生弹窗- 用 `IntersectionObserver` 检测元素进入视口（懒加载）	浏览器环境（Web API 子集）
CSS API	操作 CSS 样式与动画	`CSSStyleDeclaration`（元素样式）、`CSSKeyframesRule`（关键帧动画）、`CSSOM`（CSS 对象模型）	– 用 `element.style` 动态修改元素样式- 用 JS 动态创建 CSS 关键帧动画- 通过 `getComputedStyle()` 获取计算后样式	浏览器环境（Web API 子集）
拖拽 API	实现元素拖拽功能	`DragEvent`、`dataTransfer` 对象	– 实现文件拖拽上传- 拖拽排序列表项- 跨元素传递数据	浏览器环境（Web API 子集）
通知 API	向用户发送系统级通知（需权限）	`Notification` 对象	– 网页后台消息通知- 任务完成提醒- 实时消息推送	浏览器环境（Web API 子集）
Worker API	开启后台线程，避免阻塞主线程	`Web Worker`、`Service Worker`（离线缓存）、`SharedWorker`（多页面共享）	– 用 `Web Worker` 处理大量数据计算- 用 `Service Worker` 实现网页离线访问	浏览器环境（Web API 子集）