JavaScript中的Web API全梳理_javascript浏览器

Web API是浏览器提供的接口，使JavaScript能操作页面、处理交互、发起请求。2. DOM API用于选择、修改元素及动态更新结构。3. 事件API通过addEventListener监听用户行为，支持阻止默认动作。4. Fetch、XMLHttpRequest、WebSocket和Beacon API实现不同场景的网络通信。5. 存储API如localStorage、sessionStorage、IndexedDB和Cookie提供多层次数据保存能力。6. 其他API包括History实现路由控制，Geolocation获取位置，Canvas绘图，Intersection Observer监听视图变化，Clipboard支持剪贴板操作。掌握这些API是前端开发的核心基础。

JavaScript在浏览器中的能力远不止语言本身，真正让它能操作页面、与用户交互、发起网络请求的，是浏览器提供的Web API。这些API不是JavaScript语法的一部分，而是由浏览器实现并暴露给JS调用的功能接口。下面是对常见Web API的系统梳理，帮助你理解它们的作用和使用场景。

DOM API：操作网页内容的核心

文档对象模型（DOM）API允许JavaScript访问和修改HTML结构与样式，是前端开发最基础的部分。

• 选择元素：通过document.getElementById、querySelector等方法获取页面元素
• 修改内容：使用textContent或innerHTML改变元素文本或HTML
• 操作属性和类：调用setAttribute、classList.add来控制元素状态
• 创建与删除节点：createElement、appendChild、remove用于动态更新页面结构

事件 API：响应用户行为

事件系统让JavaScript可以监听并处理用户的操作，比如点击、输入、滚动等。

• 添加监听器：使用addEventListener绑定事件，支持捕获和冒泡阶段
• 常用事件类型：包括click、input、keydown、scroll、load等
• 事件对象：回调函数接收event参数，可获取目标元素、坐标、按键信息等
• 阻止默认行为：调用preventDefault()防止表单提交或链接跳转

网络请求 API：与服务器通信

JavaScript可以通过多种方式发起网络请求，获取数据或提交信息。

• Fetch API：现代方式，基于Promise，语法简洁，如fetch('/api/data').then(r => r.json())
• XMLHttpRequest：传统AJAX技术，兼容性好但写法较繁琐
• WebSocket：建立持久连接，适合实时通信，如聊天应用
• Beacon API：用于发送分析日志，不会阻塞页面卸载

存储 API：在客户端保存数据

浏览器提供多种本地存储机制，适应不同需求。

• localStorage：持久化存储，关闭浏览器也不丢失，适合长期配置
• sessionStorage：会话级存储，页面关闭后清除
• IndexedDB：强大但复杂，支持结构化数据和事务，适合大量离线数据
• Cookie：通过document.cookie操作，常用于身份认证，自动随请求发送

其他常用 Web API

浏览器还提供了许多实用功能，扩展了JavaScript的能力边界。

• History API：pushState和replaceState实现无刷新路由变化，支撑单页应用
• Geolocation API：获取用户地理位置，需用户授权
• Canvas & SVG：绘制图形、图表、游戏画面
• Intersection Observer：高效监听元素是否进入视口，用于懒加载或埋点
• Clipboard API：读写剪贴板内容，实现一键复制功能

基本上就这些。掌握这些Web API，才能真正发挥JavaScript在浏览器中的全部潜力。它们不是语言特性，但却是实际开发中每天都在使用的工具。熟悉其使用方式和限制，能让你写出更稳定、高效的前端代码。