DOM 是浏览器把 HTML 文档解析后形成的对象模型。JavaScript 操作页面,本质上就是读取和修改 DOM。

核心理解

HTML 是文本,DOM 是浏览器内存中的对象结构。浏览器读取 HTML 后,会把标签、属性和文本变成一个个节点 (Node),再组织成树状结构。

常见操作

const button = document.querySelector('button');
button.textContent = '保存';
button.addEventListener('click', () => {
  console.log('clicked');
});

为什么重要

  • 前端交互需要修改 DOM。
  • React、Vue 等框架最终也要把状态变化映射到 DOM。
  • 性能优化常常与 DOM 更新次数、重排和重绘有关。

相关:DOM Tree (文档对象模型树)


本文归档于个人知识库 · 领域:CS & AI · 模块:04 Project_CS_AI/Web