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可以通过多种方式发起网络请求，获取数据或提交信息。
立即学习“Java免费学习笔记（深入）”；
- 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在浏览器中的全部潜力。它们不是语言特性，但却是实际开发中每天都在使用的工具。熟悉其使用方式和限制，能让你写出更稳定、高效的前端代码。
