JavaScript是一种广泛使用的编程语言,它是 Web 开发中不可缺少的一部分。JavaScript 原生 API是一组内置的 JavaScript 函数和对象,它们使得 Web 开发者能够创建复杂的应用程序和动态交互的用户体验。
JavaScript 原生 API 非常强大,可以做很多事情,包括:
- 操作浏览器中的文档对象 (Document Object Model) - 发送 Ajax 请求获取数据和与服务端进行通信 - 创建游戏、图形和动画 - 和其他 Web 技术如 HTML5、CSS3 集成并协同工作
以下是一些常用的 JavaScript 原生 API:
1. DOM API
DOM (Document Object Model) API 可以让你控制和操作 HTML 页面的元素标签和它们的内容。通过 DOM API,你可以添加、删除、修改元素的 HTML 和 CSS,还可以监听事件等。
// 获取文档中的 h1 元素 var h1 = document.getElementsByTagName("h1")[0]; // 修改元素的文本内容 h1.textContent = "Hello World"; // 添加一个新元素到文档中 var p = document.createElement("p"); p.textContent = "This is a new paragraph"; document.body.appendChild(p);
2. Fetch API
Fetch API 提供了一种简单和优雅的方式来进行网络请求,替代了原来的 XMLHttpRequest。
// 发送一个 GET 请求 fetch('http://example.com/data') .then(response =>response.json()) .then(data =>console.log(data)) .catch(error =>console.error(error)); // 发送一个 POST 请求 fetch('http://example.com/create', { method: 'POST', body: JSON.stringify({ name: 'John', age: 25 }), headers: { 'Content-Type': 'application/json' } }) .then(response =>response.json()) .then(data =>console.log(data)) .catch(error =>console.error(error));
3. Canvas API
Canvas API 是 HTML5 中提供的一个功能强大的画布。使用 Canvas API,你可以绘制图形、创建动画和游戏等。
// 创建一个画布 var canvas = document.createElement("canvas"); // 获取画布的上下文对象 var ctx = canvas.getContext("2d"); // 绘制一个圆 ctx.beginPath(); ctx.arc(50, 50, 25, 0, 2 * Math.PI); ctx.fillStyle = "red"; ctx.fill();
4. Web Storage API
Web Storage API 提供了一种简单的方式来在浏览器中存储数据。它有两种存储方式:localStorage 和 sessionStorage。
// 存储数据到 localStorage localStorage.setItem("name", "John"); // 获取 localStorage 中的数据 var name = localStorage.getItem("name"); // 移除 localStorage 中的数据 localStorage.removeItem("name");
以上仅是 JavaScript 原生 API 的一小部分,但已经足以满足大部分的 Web 开发需求。