DOM
Document Object Model
前端工程也叫：文档对象模型、DOM 树、节点
一句话：浏览器把 HTML 解析后在内存里生成的树形结构，JavaScript 通过它读取和修改页面内容。
详细解释
HTML 是纸上的图纸，DOM 是浏览器照着图纸搭出来的实物模型。每个标签都变成树上的一个「节点」，有父子和兄弟关系，比如 body 下面有 header 和 main，main 下面又有标题和列表。
JavaScript 想改页面，比如改一段文字、隐藏一个弹窗，本质都是在操作 DOM。React、Vue 会替你管理 DOM：你只描述「页面应该长什么样」，框架负责算出差异并更新，所以在框架项目里一般不建议用 document.querySelector 直接改元素。
浏览器开发者工具的 Elements（元素）面板里，看到的就是当前的 DOM 树。
示例
灰度线框示意，只表达结构，不代表具体视觉风格。
怎么跟 AI 说
可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。
这是 React 项目，不要用 document.getElementById 或 querySelector 直接改页面元素，改成用 state 控制弹窗的显示和隐藏。需要拿到 DOM 元素时（如让输入框自动聚焦），请用 useRef。