WebAPI是什么？JavaScript怎么和浏览器交互

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《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 完成一次交互：

<button id="load">加载用户</button>


<script>
  document.getElementById('load').addEventListener('click', async () => {
    const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
    const user = await res.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，这些在浏览器里也不存在。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《WebAPI是什么？JavaScript怎么和浏览器交互》文章吧，也可关注golang学习网公众号了解相关技术文章。