1）创建新节点

2）添加、移除、替换、插入

3）查找

补充

补充：原生 DOM 操作 API 汇总：

1. 创建节点

  • document.createElement(tagName)：创建元素节点
  • document.createTextNode(text)：创建文本节点
  • document.createDocumentFragment()：创建文档片段（用于批量操作以减少回流）

2. 添加 / 移除 / 替换 / 插入

  • parent.appendChild(node)：末尾追加
  • parent.insertBefore(newNode, refNode)：在 refNode 前插入
  • parent.removeChild(node)：移除并返回该节点
  • parent.replaceChild(newNode, oldNode)：替换
  • 现代 API：node.append(...)、prepend、before、after、replaceWith

3. 查找节点

  • document.getElementById(id)
  • parent.getElementsByTagName(tag) / getElementsByClassName
  • parent.querySelector(selector) / querySelectorAll(selector)（推荐，CSS 选择器语法）
const list = document.getElementById('list')
const li = document.createElement('li')
li.textContent = 'new item'
list.appendChild(li)

const found = list.querySelector('.active')

来源整理自：vue3js.cn 面试官系列