JavaScript之所以能在浏览器里完成丰富交互，核心依赖并不是语言本身，而是一套由浏览器实现的接口集合，也就是常说的Web API。这些接口让脚本可以操作页面结构、发起网络请求、读写本地数据、调用设备能力。理解它们的分类与用法，是写好前端代码的基础。
DOM与文档操作相关API
文档对象模型（DOM）是最早被广泛使用的Web API之一。它把HTML文档表示为节点树，JavaScript通过document对象来查找、创建、修改和删除节点。比如使用document.querySelector可以按CSS选择器获取元素，比旧式的getElementById更灵活。
除了基础查询，现代DOM API还提供了更方便的方法。例如classList用来增删类名，closest可以从当前节点向上查找匹配祖先。下面代码展示如何给按钮绑定点击事件并切换状态：
// 获取按钮并绑定点击事件
const btn = document.querySelector('#toggle');
btn.addEventListener('click', () => {
// 切换active类
btn.classList.toggle('active');
// 修改文本内容
btn.textContent = btn.classList.contains('active') ? '已开启' : '已关闭';
});
这类API的优点是直观、兼容性好，几乎所有浏览器都支持。缺点是大量DOM操作会引起重排重绘，影响性能。因此实际项目中常配合虚拟DOM或批量更新策略来减少直接操作。
网络请求类API
早期前端依赖XMLHttpRequest对象发起异步请求，写法繁琐且回调嵌套严重。后来标准引入了Fetch API，基于Promise设计，代码可读性明显提升。Fetch不仅能发GET、POST，还统一通过Response对象处理返回结果。
使用Fetch时需要注意，网络错误和HTTP错误状态码处理方式不同。只有当请求无法完成时才会 reject，而404、500等会在 response 中通过 ok 属性标记。示例代码如下：
// 使用Fetch获取用户数据
fetch('https://ipipp.com/api/user/1')
.then(res => {
if (!res.ok) {
throw new Error('请求失败，状态码：' + res.status);
}
return res.json();
})
.then(data => {
console.log('用户名称：', data.name);
})
.catch(err => {
console.error('发生错误：', err.message);
});
Fetch的劣势在于默认不带Cookie，需要设置credentials选项；另外不支持请求超时原生配置，通常要配合AbortController使用。对于复杂场景，也可以选用axios等封装库，但底层仍基于这些Web API。
客户端存储API
浏览器提供了多种本地存储方案。最基础的是Web Storage，包含localStorage和sessionStorage，以键值对形式存字符串，适合轻量数据。IndexedDB则是结构化数据库，能存大量对象，支持索引和事务。
下面的例子演示如何用localStorage记住用户输入，在页面加载时恢复：
// 页面加载时恢复内容
window.addEventListener('DOMContentLoaded', () => {
const saved = localStorage.getItem('note');
if (saved) {
document.querySelector('#note').value = saved;
}
});
// 输入时保存内容
document.querySelector('#note').addEventListener('input', e => {
localStorage.setItem('note', e.target.value);
});
Web Storage写起来简单，但容量一般只有5MB左右，且只能存字符串。IndexedDB适合离线应用和缓存大量数据，不过API偏底层，常借助封装库简化操作。选择时需要根据数据规模和结构来决定。
视图与设备感知API
除了数据和网络，浏览器还开放了观察视口与设备的接口。IntersectionObserver可以异步监测元素是否进入可视区域，常用于图片懒加载和埋点曝光，比监听scroll事件更高效。
另一个常用的是ResizeObserver，能监听元素尺寸变化而不依赖全局resize。代码示例如下：
// 观察卡片尺寸变化
const card = document.querySelector('.card');
const observer = new ResizeObserver(entries => {
for (const entry of entries) {
console.log('卡片新宽度：', entry.contentRect.width);
}
});
observer.observe(card);
这类观察者API把频繁计算交给浏览器内部优化，减少了主线程压力。不过在极低版本浏览器中可能需要polyfill。合理运用能显著提升复杂页面的流畅度。
总结与选型建议
Web API并非单一模块，而是分域提供能力：DOM负责结构、Fetch负责通信、Storage负责持久化、Observer负责感知。开发时先确认目标浏览器支持度，再决定用原生还是封装库。
掌握这些接口的分类和边界，既能避免重复实现基础功能，也能在性能瓶颈出现时准确找到替换方案。建议以官方标准文档为参照，结合项目实际需求做技术取舍。
JavaScriptWeb_APIbrowser_API修改时间：2026-08-03 18:57:25