JavaScript Web API 是浏览器提供的一套可以用来操作和交互网页的接口集合。它允许开发者通过JavaScript代码来访问和操作浏览器的功能，例如DOM操作、事件处理、发送HTTP请求等。
以下是一些常见的JavaScript Web API：
- DOM API：允许开发者通过JavaScript来操作网页的结构和内容。可以使用DOM API来创建、修改和删除HTML元素，修改元素的属性和样式。
示例代码：
// 创建一个新的div元素
var div = document.createElement('div');// 设置div元素的文本内容
div.textContent = 'Hello, World!';// 将div元素添加到网页中的body元素中
document.body.appendChild(div);
- XMLHttpRequest API：允许开发者发送HTTP请求并处理响应。通过XMLHttpRequest对象，开发者可以发送GET、POST等类型的请求，设置请求头和请求体，以及处理响应数据。
示例代码：
// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();// 设置请求的方法和URL
xhr.open('GET', 'https://api.example.com/data');// 处理响应数据
xhr.onload = function() {if (xhr.status === 200) {console.log(xhr.responseText);}
};// 发送请求
xhr.send();
- Fetch API：是一个新的HTTP请求API，提供了更简洁和强大的方式来发送HTTP请求，并处理响应。
示例代码：
// 发送GET请求
fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));// 发送POST请求
fetch('https://api.example.com/data', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ name: 'John' })
}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));
- Event API：允许开发者以事件驱动的方式来处理用户和浏览器的交互。可以监听各种事件，例如点击、滚动、键盘输入等，以及自定义事件。
示例代码：
// 添加点击事件监听器
document.addEventListener('click', function(event) {console.log('Clicked at:', event.clientX, event.clientY);
});// 触发自定义事件
var event = new CustomEvent('myevent', { detail: { someData: 'Example' } });
document.dispatchEvent(event);
除了上述示例之外，JavaScript Web API 还包括了许多其他功能，例如定时器API（setTimeout、setInterval）、动画API（requestAnimationFrame）、地理位置API（Geolocation）等。开发者可以根据自己的需求选择适合的API来完成相应的任务。
