Web API 是浏览器提供的接口,使 JavaScript 能操作网页、响应事件、管理网络请求等;它非 JS 语言内置,由浏览器实现,包括 DOM、Fetch、History、Storage 等 API,且仅在浏览器环境可用。

Web API 是浏览器提供的一组接口,让 JavaScript 能够操作网页内容、响应用户行为、管理网络请求、控制多媒体、访问设备功能等。它不是 JavaScript 语言本身的一部分,而是由浏览器环境(如 Chrome、Firefox)实现并暴露给 JS 使用的扩展能力。
核心 Web API 类型
常见的 Web API 包括:
-
DOM API:用于读取、修改 HTML 和 CSS,比如
document.getElementById()、element.addEventListener() -
Fetch API:发起 HTTP 请求,替代传统的
XMLHttpRequest,例如fetch('/api/data').then(r => r.json()) - History API:控制浏览器历史记录,实现无刷新页面跳转(如单页应用常用)
-
Storage API:包括
localStorage和sessionStorage,用于在浏览器中持久或临时保存数据 - Geolocation API、Notification API、Canvas API 等:分别支持定位、消息提醒、图形绘制等功能
JavaScript 如何通过 Web API 与浏览器交互
JS 本身是单线程、非阻塞的语言,它依赖浏览器提供的 API 来完成实际任务。这个过程通常分三步:
-
调用 API 方法:比如写
console.log('Hello')或document.querySelector('button').click() - 浏览器执行底层操作:JS 引擎把请求交给浏览器内核(如 Blink、Gecko),由其真正渲染、发送网络请求、读取本地存储等
- 回调或 Promise 返回结果:异步操作(如 fetch、定时器、事件监听)通过回调函数或 Promise 通知 JS 代码“事情完成了”
一个典型例子:点击按钮获取数据
下面这段代码展示了 JS 如何组合多个 Web API 完成一次交互:
立即学习“Java免费学习笔记(深入)”;
这里用到了:DOM API(选中按钮和 div)、Event API(监听点击)、Fetch API(发请求)、JSON API(解析响应)——全部都是浏览器提供的能力,JS 只负责协调和处理逻辑。
注意:不是所有 API 都能在任何环境下使用
Web API 是浏览器专属的。在 Node.js 环境中,没有 document、fetch(原生不支持,需额外安装)、localStorage 等,因为它没有 DOM 和浏览器上下文。反过来,Node.js 提供了文件系统(fs)、进程(process)、HTTP 服务(http 模块)等服务端 API,这些在浏览器里也不存在。










