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免费学习笔记（深入）”；
极限网络办公Office Automation
下载
专为中小型企业定制的网络办公软件,富有竞争力的十大特性： 1、独创 web服务器、数据库和应用程序全部自动傻瓜安装，建立企业信息中枢 只需3分钟。 2、客户机无需安装专用软件，使用浏览器即可实现全球办公。 3、集成Internet邮件管理组件，提供web方式的远程邮件服务。 4、集成语音会议组件，节省长途话费开支。 5、集成手机短信组件，重要信息可直接发送到员工手机。 6、集成网络硬
- 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在浏览器中的全部潜力。它们不是语言特性，但却是实际开发中每天都在使用的工具。熟悉其使用方式和限制，能让你写出更稳定、高效的前端代码。
