JavaScript的Web API是浏览器提供的接口,用于调用内置功能,如DOM操作、Fetch网络请求、Storage数据存储、Geolocation定位、Canvas绘图等,非JS语言原生部分,受同源策略和权限限制。

JavaScript 的 Web API 是浏览器提供的一套接口,让你的代码能调用浏览器内置功能,比如操作页面、获取用户位置、发送网络请求、控制音频视频、存储数据等。它不是 JavaScript 语言本身的一部分,而是由浏览器实现并暴露给 JS 脚本使用的对象和方法。
DOM API:操作网页内容的核心
DOM(Document Object Model)是浏览器把 HTML 文档解析成树状结构后的表示方式。通过 DOM API,你可以动态读取、修改、添加或删除页面元素。
-
获取元素:用
document.getElementById()、document.querySelector()等方法选中目标节点 -
修改内容:设置
element.textContent或element.innerHTML更新文本或 HTML -
响应交互:用
element.addEventListener('click', handler)监听用户点击、输入等事件
Fetch API:发起网络请求的标准方式
取代传统 XMLHttpRequest,Fetch 提供更简洁、基于 Promise 的 HTTP 请求接口。
- 基本用法:
fetch('/api/data').then(res => res.json()).then(data => console.log(data)) - 支持 POST 提交:
fetch('/login', { method: 'POST', body: JSON.stringify({user:'a'}) }) - 注意处理错误:网络失败会 reject,但 4xx/5xx 状态码不会自动 throw,需手动检查
res.ok
Storage API:在浏览器中持久保存数据
包括 localStorage 和 sessionStorage,适合存少量字符串数据(如用户偏好、登录态)。
立即学习“Java免费学习笔记(深入)”;
-
localStorage.setItem('theme', 'dark')写入数据,关闭标签页也不丢失 -
sessionStorage只在当前会话有效,关闭标签即清空 - 所有值都会被自动转为字符串,复杂数据要用
JSON.stringify()和JSON.parse()
其他常用 Web API 示例
浏览器还提供了大量实用接口:
-
Geolocation API:用
navigator.geolocation.getCurrentPosition()获取用户地理位置(需用户授权) -
Canvas API:通过
元素的getContext('2d')绘制图形、动画 - Web Storage + IndexedDB:IndexedDB 支持结构化数据和事务,适合离线应用
-
Notifications API:调用
Notification.requestPermission()后可向用户推送桌面通知
这些 API 都运行在浏览器安全沙箱中,受同源策略、权限提示、HTTPS 限制等约束。使用前建议查 MDN 文档确认兼容性和权限要求。











