JavaScript里实用的原生API汇总

什么是原生API？

在 JavaScript 中，原生 API 是指可以直接在浏览器中使用的 JavaScript 函数和对象。它们已经被封装到浏览器中了，可以直接使用，无需安装额外的库或框架。

以下是一些常见的原生 API：

• DOM API：用于操作文档对象模型（DOM）的 API。
• BOM API：用于操作浏览器对象模型（BOM）的 API。
• Canvas API：用于绘制图形的 API。
• Web API：用于访问浏览器功能的 API。

DOM API

document.querySelector()

该 API 用于选择 HTML 元素并返回一个对象，这个对象可以被用于进一步的 DOM 操作。

例如，选择 id 为 "myDiv" 的元素：

const myDiv = document.querySelector('#myDiv');

element.setAttribute()

该 API 可以用于设置 HTML 元素的属性值。它接受两个参数：属性名称和属性值。

例如，将 div 元素的 id 设置为 "myDiv"：

const myDiv = document.createElement('div');
myDiv.setAttribute('id', 'myDiv');

BOM API

window.location

该 API 用于获取和设置当前窗口的 URL。例如，获取当前窗口的 URL：

const url = window.location.href;
console.log(url);

window.setTimeout()

该 API 用于在一定时间后执行一段代码。它接受两个参数：要执行的代码和要等待的时间（以毫秒为单位）。

例如，等待 1 秒后弹出 "Hello, World!"：

window.setTimeout(function() {
  alert('Hello, World!');
}, 1000);

Canvas API

canvas.getContext()

该 API 用于获取 canvas 元素的绘图上下文，你可以使用该上下文绘制 2D 或 3D 图形。

例如，获取 2D 上下文并绘制一个红色矩形：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);

Web API

fetch()

该 API 用于发起一个 HTTP 请求，并返回一个 Promise，该 Promise 将在请求完成后（无论成功与否）被解决。

例如，获取一个 JSON 文件并将其解析为 JavaScript 对象：

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => console.log(data));

结论

以上是 JavaScript 中一些实用的原生 API，包括 DOM API、BOM API、Canvas API 和 Web API。学会使用这些 API 可以帮助你更加高效地开发 JavaScript 应用程序。