DOM
DOM（Document Object Model）也常被叫作：文档对象模型网页结构树元素树页面结构
「浏览器把网页变成一棵可以查看、可以改动的结构树，我让 AI「把标题改成红色」改的就是这棵树。」
DOM DOM（Document Object Model）
浏览器加载网页后搭出来的「活结构树」，页面上的每个元素在树里都有一个位置。
DOM 是浏览器把网页变成的「活结构」。你写的 HTML 是躺在文件里的静态文字；浏览器读它以后，在内存里搭出一棵树——页面上的每个标题、每张图片、每个按钮都是这棵树上的一个节点。这棵树就叫 DOM（Document Object Model，文档对象模型）。
为什么你要关心它：因为所有「改页面」的动作，改的都是这棵树，不一定是你的文件。JavaScript 改的是 DOM；你在浏览器开发者工具的「元素/检查」面板里看到的那棵结构树，就是 DOM 的实时样子；页面显示成什么样，是这棵树渲染出来的结果。判断 AI 有没有真改，刷新后打开元素面板看这棵树，比看截图可靠。
一个容易忽略的事实：DOM 里藏着看不见的东西。一个用样式藏起来（display:none）的元素，在 DOM 里依然存在，只是不显示。「页面上看不到」不等于「代码里没有」。所以排查「为什么没显示」时，先去元素面板确认它到底是不存在，还是被藏了起来。
长什么样 真实可交互，不是截图
你在「元素面板」里看到的，就是 DOM
<div class="card"><h2>今日任务</h2><button>完成</button></div>
上面那行是 HTML 源码，下面四个步骤是它在浏览器里的命运：被读成 DOM，再渲染成画面。打开任意网页按 F12，元素面板里那棵树就是它。
拆开看，里面有这几块
-
1
文档 Document
整棵树的根，代表整个页面。所有元素都挂在这棵根上。
-
2
节点 Node
树上的每一个点。元素、文字、注释，都是节点。
-
3
元素 Element
由标签构成的那类节点，如 h1、button、div。
-
4
父子关系 Parent / Child
嵌套关系：外层是父，内层是子。谁在谁里面，决定了结构层级。
-
5
属性 Attribute
元素上附加的信息，如 id、class、disabled。
常见的有哪几种
页面加载后结构不再变，只有内容没有交互。
用在：纯展示页、文章页
页面运行时被 JavaScript 增删改，结构会随操作变化。
用在：交互页面、数据会变化的页面
容易搞混？这样区分
JavaScript 是动手的人，DOM 是被动手的对象。JS 改的是 DOM 这棵树，而不是直接改你的 HTML 文件——所以有些改动刷新一下就没了，因为它只活在内存里。
看 JavaScriptDOM 是结构数据，画面是它渲染出来的结果。被样式藏起来的元素在 DOM 里仍在，画面里却看不到。看结构要看元素面板，别只看截图。
什么时候用得上
刷新页面后打开元素面板，亲眼确认结构变了、位置对，而不是听 AI 转述。
元素面板里看它到底是不存在，还是被样式藏了起来——两种原因，两种修法。
从结构树看元素在不在、事件绑没绑上，比凭空猜原因快得多。
你可以这样跟 AI 说
直接复制下面这段，把【】里的换成你的情况。它比一句「帮我加个 X」多说清楚了：改哪里、不许动啥、做完交什么。
【范围】只处理 [具体页面] 里 [某块内容] 的结构调整，不碰其它页面和整体布局 【目标】帮我在页面里 [加/改/删] 一块内容，并说明它在这棵 DOM 结构树里处于什么位置、和相邻元素是什么关系 【边界】 - 这一轮只动结构，不要改样式（颜色、间距）和交互逻辑 - 不要动我没提到的元素 - 改完告诉我这个元素在元素面板里怎么找到（按什么标签、类名、在什么位置） 【交付】 1. 改了哪个文件、加了或删了哪些节点 2. 我刷新页面后，打开开发者工具的元素面板，应该能在哪个位置看到它 3. 哪部分你没亲自验证，明确说出来
「在元素面板里怎么找到」这一条是关键：它逼 AI 说清楚改动落在这棵树的具体位置，你就能按图索骥亲眼核对，而不是只看它描述「做好了」。
它说「做好了」，你怎么自己验
这是本站的重头戏。AI 最会的不是写代码，是说「已完成」。这一条，它通常最多做到「主路径」这层：真实用户的正常操作能走通，不靠特殊参数。
要亲眼看到这些，才算数
- 按 F12 打开开发者工具，切到「元素/检查」面板，找到目标元素，核对标签名、类名、文字内容与你要的一致。
- 刷新页面后再看一次，结构还在——证明改动进了文件，不是只在内存里临时变了一下。
- 在元素面板里临时勾掉（隐藏）某个元素，确认页面上对应内容消失——证明这棵树确实是页面显示的来源。
- 找一个被样式藏起来的元素（如 display:none），确认它在 DOM 里依然存在：「看不见」不等于「不存在」。
- 让 AI 指出它的位置，你按它说的路径在元素面板里自己找一遍，找得到才算数。
它常这么糊弄你
- 「我已经改了」——但刷新后原样。可能只改了内存里的 DOM 没存进文件，或改错了文件。刷新 + 元素面板核对。
- 「页面更新了」——发来一张截图。截图是渲染结果，证明不了结构对不对。要求打开元素面板亲眼看。
- 「这个元素我删掉了」——元素面板里它还在，只是被样式藏起来了。删和藏是两回事。
- 「结构没问题」——它可能把所有内容塞进一个 div 里，看起来一样但结构烂掉了。看标签是不是语义化的真标签。
DOM 能验到「主路径」层：你亲手在元素面板里核对这棵树，比任何转述都可靠。再往上到「生产」，只是把这套检查放到线上真实环境再跑一遍。
考考你 选一个你觉得对的
AI 说「按钮文字我改成了『保存草稿』」。你想确认它是真改了文件、下次打开还在，最靠谱的验证是？
刷新后还在 + 元素面板对得上，才证明改动进了文件、下次打开还在。截图可以造假；当前页面看到的可能是内存里的临时改动，刷新就没了。