什么是Web API_JavaScript如何与浏览器交互

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 完成一次交互：

加载用户

这里用到了：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，这些在浏览器里也不存在。