常用的webapi

Webapi

JavaScript Web API 是一组浏览器提供的接口，用于与浏览器和设备进行交互。它们使得 JavaScript 可以实现一些浏览器内置的功能，比如操作 DOM、发送 HTTP 请求、存储数据等。以下是一些常用的 JavaScript Web API：

1. DOM (Document Object Model) API

• document.getElementById(): 通过元素的 ID 获取一个元素。
• document.querySelector(): 返回匹配指定 CSS 选择器的第一个元素。
• element.innerHTML: 获取或设置 HTML 内容。
• element.addEventListener(): 为元素添加事件监听器。

2. Fetch API

• 用于发起网络请求，替代传统的 XMLHttpRequest。

• 示例:

  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
  
  
  

3. Local Storage 和 Session Storage

• 用于在浏览器中存储数据。
• localStorage.setItem('key', 'value'): 存储数据。
• localStorage.getItem('key'): 获取数据。
• sessionStorage: 与 localStorage 类似，但数据在标签页关闭时清除。

4. Canvas API

• 用于在网页上绘制图形。

• 示例:

  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'green';
  ctx.fillRect(10, 10, 100, 100);
  
  
  

5. Geolocation API

• 获取用户的位置。

• 示例:

  navigator.geolocation.getCurrentPosition(position => {
    console.log('Latitude:', position.coords.latitude);
    console.log('Longitude:', position.coords.longitude);
  });
  
  

6. History API

• 用于操作浏览器历史记录。
• history.pushState(): 添加新的历史记录条目。
• history.back(): 后退到上一页。
• history.forward(): 前进到下一页。

7. WebSocket API

• 用于建立与服务器的双向通信。

• 示例:

  const socket = new WebSocket('ws://example.com/socket');
  socket.onopen = () => {
    console.log('WebSocket connection opened');
  };
  socket.onmessage = event => {
    console.log('Message from server:', event.data);
  };
  ``
  
  

8. File API

• 用于读取和处理用户上传的文件。

• 示例:

  const input = document.querySelector('input[type="file"]');
  input.addEventListener('change', () => {
    const file = input.files[0];
    const reader = new FileReader();
    reader.onload = () => {
      console.log(reader.result);
    };
    reader.readAsText(file);
  });
  
  
  

9. Notification API

• 用于向用户显示通知。

• 示例:

  if (Notification.permission === 'granted') {
    new Notification('Hello, world!');
  } else {
    Notification.requestPermission().then(permission => {
      if (permission === 'granted') {
        new Notification('Hello, world!');
      }
    });
  }
  
  
  

10. Clipboard API

• 用于读写剪贴板内容。

• 示例:

navigator.clipboard.writeText('Copy this text to clipboard')
   .then(() => console.log('Text copied to clipboard'))
   .catch(err => console.error('Error copying text: ', err));

这些 API 提供了丰富的功能来提升 Web 应用的用户体验。熟悉并利用这些 API 可以帮助你构建功能强大且用户友好的应用程序。