一、浏览器提供的常用 API 方法

1. DOM 操作 API

• ​查询元素​：

  • document.getElementById()
  • document.querySelector()
  • document.querySelectorAll()

• ​元素操作​：

  • element.addEventListener()
  • element.removeEventListener()
  • element.classList
  • element.setAttribute()/getAttribute()

2. BOM (浏览器对象模型) API

• ​窗口控制​：

  • window.open()/close()
  • window.scrollTo()/scrollBy()
  • window.resizeTo()

• ​导航相关​：

  • window.location (href, reload, replace)
  • window.history (pushState, replaceState, go)

• ​存储相关​：

  • localStorage/sessionStorage
  • indexedDB
  • cookies (document.cookie)

3. 异步通信 API

• fetch()
• XMLHttpRequest
• WebSocket
• EventSource (服务器推送)

4. 媒体 API

• AudioContext
• MediaDevices.getUserMedia() (摄像头/麦克风)
• HTMLMediaElement (video/audio)

5. 图形 API

• CanvasRenderingContext2D
• WebGLRenderingContext
• requestAnimationFrame()

6. 设备 API

• Geolocation
• DeviceOrientationEvent
• Battery Status API

二、window 对象提供的主要属性和方法

1. 核心属性

• window.document - DOM根节点
• window.location - URL信息
• window.navigator - 浏览器信息
• window.screen - 屏幕信息
• window.history - 浏览历史
• window.console - 控制台对象

2. 常用方法

• ​定时器​：

  • setTimeout()/clearTimeout()
  • setInterval()/clearInterval()

• ​对话框​：

  • alert()
  • confirm()
  • prompt()

• ​其他​：

  • requestAnimationFrame()
  • matchMedia() (媒体查询)
  • getComputedStyle()

3. 子对象

• window.JSON - JSON解析
• window.Math - 数学计算
• window.URL - URL处理
• window.Intl - 国际化

三、JavaScript 内置对象

1. 基础对象

• Object - 所有对象的基类
• Function - 函数对象
• Boolean - 布尔值包装对象
• Symbol - 唯一标识符

2. 数字和日期

• Number - 数字包装对象
• Math - 数学运算
• Date - 日期时间处理
• BigInt - 大整数

3. 文本处理

• String - 字符串包装对象
• RegExp - 正则表达式

4. 集合对象

• Array - 数组
• Map/Set - 键值对集合
• WeakMap/WeakSet - 弱引用集合
• ArrayBuffer - 二进制数据
• TypedArray - 类型化数组

5. 错误处理

• Error - 基础错误
• SyntaxError - 语法错误
• TypeError - 类型错误
• Promise - 异步处理

6. 其他重要对象

• Promise - 异步编程
• Proxy - 对象代理
• Reflect - 反射操作
• Intl - 国际化

四、现代浏览器新增的重要 API

1. 存储相关

• Cache API (Service Worker缓存)
• File System Access API (文件系统)

2. 图形与动画

• WebGL/WebGPU (3D图形)
• Web Animations API (CSS动画控制)

3. 网络相关

• WebRTC (实时通信)
• WebSocket (全双工通信)
• Fetch API (替代XMLHttpRequest)

4. 设备能力

• Geolocation API (地理位置)
• DeviceOrientation API (设备方向)
• Payment Request API (支付接口)

5. 性能相关

• Performance API (性能监测)
• Intersection Observer API (元素可见性)
• Resize Observer API (尺寸变化)

五、API 使用示例

1. 设备能力检测

if ('geolocation' in navigator) {
  navigator.geolocation.getCurrentPosition(position => {
    console.log(position.coords);
  });
}

2. 现代存储方案

// 使用IndexedDB存储大量数据
const request = indexedDB.open('myDatabase');
request.onsuccess = (e) => {
  const db = e.target.result;
  const transaction = db.transaction('store', 'readwrite');
  const store = transaction.objectStore('store');
  store.put({ id: 1, data: 'value' });
};

3. 性能监测

// 测量代码执行时间
performance.mark('start');
// 执行某些操作...
performance.mark('end');
performance.measure('operation', 'start', 'end');
console.log(performance.getEntriesByName('operation'));

六、API 兼容性处理

1. 特性检测

if ('IntersectionObserver' in window) {
  // 使用现代API
  const observer = new IntersectionObserver(callback);
} else {
  // 降级方案
  window.addEventListener('scroll', scrollHandler);
}

2. Polyfill 策略

// 动态加载polyfill
if (!window.Promise) {
  const script = document.createElement('script');
  script.src = 'https://polyfill.io/v3/polyfill.min.js?features=Promise';
  document.head.appendChild(script);
}

掌握这些API和内置对象是成为高级JavaScript开发者的基础，建议根据实际开发需求深入学习各API的细节用法。