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免费学习笔记（深入）”；
<button id="load">加载用户</button>
<div id="result"></div>
<script>
document.getElementById('load').addEventListener('click', async () => {
const res = await fetch('https://<a style="color:#f60; text-decoration:underline;" title= "js" href="https://www.php.cn/zt/15802.html" target="_blank">jsonplaceholder.typicode.com/users/1');
const user = await res.<a style="color:#f60; text-decoration:underline;" title= "json" href="https://www.php.cn/zt/15848.html" target="_blank">json();
document.getElementById('result').textContent = user.name;
});
</script>
这里用到了：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，这些在浏览器里也不存在。
