常用API整理

把js的高频API整理完，对那部分的认识通透了不少，很有满足感，因此其他部分的常用API我也有必要整理一下，于是查文档+看视频+问AI,整理了下面内容
以下是根据你的需求整理和完善的Markdown笔记，涵盖了高频DOM/CSS API，并补充了关键知识点。内容结构清晰，分为CSS选择器、DOM操作、样式操作、事件相关等模块：

浏览器API

localStorage和sessionStorage

浏览器存储localStorage和sessionStorage，用于在客户端持久化存储数据

特性 localStorage sessionStorage
存储时间 永久存储，除非手动删除 会话期间存储，关闭页面/浏览器后清除
存储大小 通常为 5MB 左右（不同浏览器可能不同） 同上
作用域 同一域名下所有页面共享 同一页面/标签页的会话内有效

localStorage只能存储字符串，存取对象需要JSON方法进行转换，否则是[object Objet]
loacl/sssionStorage不同域的数据不共享
sessionStorage同一浏览器窗口的不同标签页可共享数据，新开的窗口不共享

常用方法

1
2
3
4
5
// localStorage 的常用方法（sessionStorage 方法同理）
localStorage.setItem(key, value);  // 存储键值对
localStorage.getItem(key);         // 获取键对应的值
localStorage.removeItem(key);      // 删除指定键
localStorage.clear();              // 清除所有数据

存储限制

  • 数据类型：只能存储字符串！若需存储对象或数组，需先序列化（JSON.stringify）。
  • 示例：
    1
    2
    3
    4
    5
    6
    7
    // 存储对象
    const user = { name: "Alice", age: 20 };
    localStorage.setItem("user", JSON.stringify(user));

    // 获取并解析对象
    const userStr = localStorage.getItem("user");
    const userObj = JSON.parse(userStr);

cookie像超市会员卡 ，容量小，每次都会携带。
在服务器第一次返回响应时候，会在响应头添加cookie信息，浏览器自动保存到本地，下次访问同一域名时会在请求头中自动带上cookie，服务器根据cookie识别用户身份。
可以设置过期时间，常用来存储token实现登录状态的保持

cookie的HttpOnly属性

是cookie的一个安全属性，设置后JS无法读取这个cookie，防止黑客攻击身份被盗
重点补充：

API获取（axios,fetch）

axios

axios 是一个基于 Promise 的 HTTP 客户端库，用于在浏览器和 Node.js 中发送 HTTP 请求。它提供了许多高级功能，如请求拦截、响应拦截、错误处理、取消请求、超时控制等

axios基本用法获取api

1
2
3
4
5
6
7
8
9
10
11
12
13
// GET 请求
axios.get(url)
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

// POST 请求
axios.post(url, data)
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

// 全局配置示例
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer your_token';

fetch

fetch 是一个用于在浏览器中处理 HTTP 请求的 API，它提供了一种更简洁的方式来发送请求，并返回一个 Promise 对象，用于处理响应

fetch基本用法获取api

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// GET 请求
fetch(url)
  .then(response => {
    if (!response.ok) throw new Error(`HTTP error! ${response.status}`);
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

// POST 请求
fetch(url, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .catch(error => console.error(error));

对比

fetch 与 axios 的主要区别在于它们使用的底层 API。axios 使用 XMLHttpRequest（XHR）对象，而 fetch 使用 Fetch API

  1. 选择 Fetch 的场景：

    • 项目简单，仅需基础请求。
    • 希望减少第三方依赖，保持代码轻量化。
    • 现代浏览器环境（无需兼容旧版）。

  2. 选择 Axios 的场景：

    • 需要拦截器、全局配置、统一错误处理。
    • 需要高级功能（如超时、上传进度、取消请求）。
    • 需要兼容旧版浏览器或 Node.js 环境。

Axios vs Fetch 对比表**

特性 Fetch Axios 备注
浏览器支持 现代浏览器原生支持，旧版需 polyfill（如 whatwg-fetch） 兼容 IE 及旧版浏览器，需引入第三方库 Fetch 需额外依赖兼容旧浏览器；Axios 提供更广兼容性。
错误处理 需手动检查 response.ok，非 2xx 状态码 不会触发 catch 自动将非 2xx 状态码视为错误，直接触发 catch Axios 更友好，简化错误处理逻辑。
JSON 自动转换 需手动调用 response.json() 解析数据 自动转换 JSON，直接访问 response.data Fetch 需显式处理数据格式；Axios 简化数据解析。
拦截器 不支持 支持 请求/响应拦截器，统一处理 Token、日志等 Axios 的拦截器是全局配置的利器。
超时设置 需结合 AbortController 和 setTimeout 实现 直接配置 timeout 属性 Axios 提供更简洁的超时控制。
取消请求 使用 AbortController.signal 支持 AbortController 或 CancelToken（旧版） 两者均支持，但 Axios 的 CancelToken 更早实现此功能。
上传/下载进度 不支持 支持监听进度事件（如 onUploadProgress） Axios 适合需要监控进度的场景（如文件上传）。
CSRF 防护 需手动设置 credentials: 'include' 发送 Cookie 默认发送 Cookie，内置 XSRF 防护（自动同步 Cookie 和 X-CSRFToken） Axios 更适合需要安全防护的 Web 应用。
全局配置 需手动封装（如统一请求头、基础 URL） 支持 axios.defaults 全局配置（如 baseURL, headers） Axios 提供更灵活的全局配置能力。
请求语法 需显式设置 method、headers，数据需序列化为字符串（如 JSON.stringify） 直接传递 data 对象，自动序列化为 JSON Axios 的语法更简洁直观。
适用场景 简单请求、减少依赖、现代浏览器环境 复杂需求、拦截器、全局配置、兼容旧浏览器、需要高级功能（如超时、进度） Fetch 适合轻量级项目；Axios 适合复杂业务场景。

定时器

基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 1. setTimeout
const timerId = setTimeout(() => {
  console.log("3秒后执行");
}, 3000); // 3000毫秒（3秒）

// 清除定时器
clearTimeout(timerId);

// 2. setInterval
const intervalId = setInterval(() => {
  console.log("每2d秒执行一次");
}, 2000);

// 清除周期任务
clearInterval(intervalId);

关键特性

  • 异步执行：定时器回调在事件循环中执行，不会阻塞主线程。
  • 依赖浏览器环境：页面关闭或标签页失去焦点时，定时器可能失效。
  • 无法精确控制时间：受浏览器调度影响，实际执行时间可能有偏差。

CSS选择器

基础选择器

  • document.querySelector
    获取第一个匹配的元素（返回单个元素） 

    1
    2
    3
    const firstDiv = document.querySelector("div"); // 第一个div
    const idElement = document.querySelector("#header"); // 通过id选择
    const classElements = document.querySelector(".active"); // 通过类名选择

  • document.querySelectorAll
    获取所有匹配的元素（返回伪数组NodeList） 

    1
    2
    const allDivs = document.querySelectorAll("div"); // 所有div
    const inputs = document.querySelectorAll("input[type='text']"); // 属性选择

  • 伪数组转真数组 

    1
    2
    const nodeList = document.querySelectorAll(".item");
    const array = Array.from(nodeList); // 转为数组

高级选择器语法

语法 说明 示例
标签选择器 div、span 选中所有div元素
ID选择器 #header 选中id="header"的元素
类选择器 .active 选中所有类名包含active的元素
属性选择器 [name="username"] 选中name属性值为username的元素
后代选择器 .container .item 选中.container内所有.item后代
子选择器 .menu > li 选中.menu的直接子元素li
并集选择器 img, video 选中所有img或video元素
伪类选择器 a:hover 选中鼠标悬停的链接
伪元素选择器 p::first-line 选中段落的第一行
querySelector('[data-filter-name="X"]')：精确匹配特定属性值的元素

DOM结构与遍历

元素访问与遍历

属性/方法 说明 示例
children 返回元素的所有直接子元素（仅元素节点） parent.children[0]
childNodes 返回所有子节点（包括文本节点、注释节点等） parent.childNodes
firstChild/lastChild 获取第一个/最后一个子节点（可能为文本节点） parent.firstChild
nextSibling/previousSibling 获取下一个/上一个兄弟节点（可能为文本节点） element.nextSibling
parentElement 获取父元素（排除文本节点） element.parentElement
closest() 向上遍历父元素，直到找到匹配选择器的元素 element.closest(".container")
matches() 判断元素是否匹配选择器 element.matches("div")

遍历

1
2
3
4
5
6
7
8
9
// 遍历所有子元素
Array.from(parent.children).forEach(child => {
  console.log(child);
});

// 遍历所有后代元素
document.querySelectorAll(".ancestor *").forEach(descendant => {
  console.log(descendant);
});

节点操作

创建与插入节点

方法 说明 示例
document.createElement(tagName) 创建新元素 const newDiv = document.createElement("div");
parent.appendChild(child) 将子元素添加到父元素末尾 parent.appendChild(newDiv);
parent.insertBefore(newNode, referenceNode) 在指定节点前插入 parent.insertBefore(newDiv, existingNode);
parent.prepend(child) 将子元素添加到父元素开头（ES6+） parent.prepend(newDiv);
element.before(node) 在当前元素前插入节点 element.before(newDiv);
element.after(node) 在当前元素后插入节点 element.after(newDiv);
插入的位置： 
1
2
3
4
5
6
before(node)
<div>
prepend(node)
append(node)
</div>
after(node)

删除与替换节点

方法 说明 示例
parent.removeChild(child) 从父元素中移除子元素 parent.removeChild(oldDiv);
element.replaceWith(newNode) 用新节点替换当前节点 oldDiv.replaceWith(newDiv);
parent.replaceChild(newNode, oldNode) 替换父元素中的旧节点 parent.replaceChild(newDiv, oldDiv);

3. 克隆节点

1
const clonedNode = element.cloneNode(true); // true表示深拷贝（复制子节点）

样式操作

基于Class的样式

  • **classList**：操作元素的类名 
    1
    2
    3
    4
    element.classList.add("active");    // 添加类
    element.classList.remove("active"); // 移除类
    element.classList.toggle("active"); // 切换类（存在则移除，否则添加）
    element.classList.contains("active"); // 检查是否存在类

基于Style的样式

  • 直接操作内联样式 
    1
    2
    3
    4
    5
    6
    // 设置样式（小驼峰命名，带单位）
    element.style.width = "100px";
    element.style.backgroundColor = "red";

    // 获取样式（返回计算后的值）
    const computedWidth = window.getComputedStyle(element).width;

动态计算样式值

1
2
3
// 将25px增加到30px
const currentWidth = parseInt(element.style.width, 10); // 提取数值
element.style.width = (currentWidth + 5) + "px"; // 新值加单位

其他高频API

数据属性（dataset）

  • 访问HTML5数据属性 
    1
    <div data-user="123" data-status="active"></div>
    1
    2
    const user = element.dataset.user; // "123"
    element.dataset.status = "inactive"; // 设置值

获取元素尺寸

属性 说明
offsetWidth/offsetHeight 包含padding和border的宽度/高度
clientWidth/clientHeight 可视内容区域（不包含滚动条）
scrollWidth/scrollHeight 元素内容的总宽度/高度（含溢出部分）

事件相关（基础操作）

1
2
3
4
5
6
7
// 添加事件监听
element.addEventListener("click", (event) => {
  console.log("Clicked!");
});

// 移除事件监听
element.removeEventListener("click", handler);