DOM 常见操作

DOM 常见操作

1. 文档对象模型（DOM）是什么？

文档对象模型（DOM）是 HTML 和 XML 文档的编程接口。

它提供了对文档的结构化的表述，并定义了一种方式可以从程序中对该结构进行访问，从而改变文档的结构、样式和内容。任何 HTML 或 XML 文档都可以用 DOM 表示为一个由节点构成的层级结构。

2. 日常前端开发场景

在以前，我们使用 jQuery、Zepto 等库来操作 DOM；之后在 Vue、Angular、React 等框架出现后，我们通过操作数据来控制 DOM（绝大多数时候），越来越少地直接操作 DOM。但这并不代表原生操作不重要——恰恰相反，DOM 操作才有助于我们理解框架的底层。

3. 常见 DOM 操作分类

• 创建：document.createElement、document.createTextNode、element.cloneNode、document.createDocumentFragment。
• 查询：getElementById、getElementsByClassName、querySelector、querySelectorAll。
• 修改：innerText / textContent、innerHTML、setAttribute、classList。
• 插入：appendChild、insertBefore、prepend、append。
• 删除：removeChild、element.remove()。
• 关系：parentNode、children、firstChild / lastChild、nextSibling / previousSibling。

4. 简单示例

// 创建并插入
const li = document.createElement('li');
li.textContent = 'new item';
document.querySelector('#list').appendChild(li);

// 查询与修改
const item = document.querySelector('.item');
item.classList.add('active');
item.setAttribute('data-id', '1');

// 删除
item.remove();

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