你可能会说
我想用代码动态改变页面上某个元素的内容和样式。
DOM（文档对象模型）是浏览器把 HTML 解析后生成的树状对象结构，JavaScript 通过它来读取和操控页面。
浏览器把 HTML 变成一棵「树」，每个标签是树上的一个节点。JavaScript 通过操作这棵树来改变页面——增删改查任何元素。
生活类比
像一棵家谱树：html 是祖宗，body 是儿子，div 是孙子……JavaScript 就是那个能修改家谱的人。
🎮 动手试试
👇 动态增删改 DOM 元素
document.querySelector('.box') 返回什么？
你可以这样告诉 AI
帮我写 JS：点击按钮后，找到 id 为 result 的元素，把文字改成「加载完成」，同时加上绿色高亮样式。
HTML 是你写的静态文件，DOM 是浏览器解析后在内存中构建的活对象树——可以被 JS 动态修改。
虚拟 DOM 是 React 在内存中的轻量镜像，真实 DOM 是浏览器实际渲染的对象树。
动态更新页面
不刷新页面就改变内容、样式、结构
响应用户操作
点击、输入后即时反馈
框架项目中
用 React/Vue 时不直接操作 DOM，框架帮你管理
大量节点更新
频繁操作真实 DOM 性能差，考虑虚拟 DOM 或批量更新
树上的每个元素（标签、文本、注释）都是一个节点
document.querySelector('.class') 找到目标元素
改 textContent、style、classList、innerHTML
createElement + appendChild 添加，remove() 删除