DOM是HTML的“JS版本”，即浏览器将HTML解析成可操作的树状对象结构，使JavaScript能控制内容、样式和事件。
DOM（Document Object Model）是浏览器把 HTML 文档解析成的一个树状对象结构，每个标签、文本、属性都变成可操作的 JS 对象。有了它，JavaScript 才能真正“看到”并控制网页内容和样式。
DOM 是什么？
简单说，DOM 就是 HTML 的“JS 版本”。比如页面里有 <h1 id="title">欢迎</h1>，浏览器加载后会自动生成一个 DOM 节点对象，你可以用 JS 写 document.getElementById('title') 拿到它，然后读取或改写它的文字、颜色、显示状态等。
这个对象树有层级关系：document 是根，下面有 html、head、body，body 里再嵌套 div、p、span……每个节点都有属性（如 node.tagName）、方法（如 node.appendChild()）和事件响应能力。
怎样获取页面中的元素？
常用方法有这几个，按场景选：
立即学习“Java免费学习笔记（深入）”；
-
document.getElementById('id名')—— 最快，适合唯一标识的元素 -
document.querySelector('CSS选择器')—— 灵活，支持.class、div>p、[data-id="123"]等写法，只返回第一个匹配项 -
document.querySelectorAll('选择器')—— 返回所有匹配的 NodeList（类似数组，可遍历） -
element.children或element.parentNode—— 在已有节点基础上向上/向下找兄弟或父子元素
怎样动态修改内容和样式？
拿到元素后，改内容和样式都很直接：
-
改文字内容：
el.textContent = '新文字'（安全，不解析 HTML）或el.innerHTML = '<em>加粗</em>文字'（可插 HTML，但注意 XSS 风险） -
改样式：
el.style.color = 'red'（内联样式，驼峰写法，如backgroundColor），或者更推荐：el.classList.add('active')/.remove()/.toggle()—— 通过 CSS 类来控制样式，更清晰也更易维护 -
改属性：
el.setAttribute('data-loaded', 'true')或简写el.dataset.loaded = 'true' -
增删元素：
parentEl.appendChild(newEl)、el.remove()、parentEl.insertBefore(newEl, refEl)
一个小例子：点击按钮换标题和背景
假设页面有个按钮和一个标题：
<button id="changeBtn">换皮肤</button><br><h1 id="mainTitle">默认标题</h1>
JS 可以这样写：
const btn = document.getElementById('changeBtn');<br>const title = document.getElementById('mainTitle');<br><br>btn.addEventListener('click', () => {<br> title.textContent = '已更新！';<br> title.classList.add('highlight'); // 前提是 CSS 里定义了 .highlight { color: #ff6b6b; }<br> document.body.style.backgroundColor = '#f8f9fa';<br>});
基本上就这些。DOM 操作不复杂，但容易忽略细节，比如获取元素时页面还没加载完（记得用 DOMContentLoaded 或把 script 放在 body 底部），或者 classList 方法在老 IE 不支持（现代项目一般不用管）。掌握核心几个 API，就能稳稳地让网页“活起来”。
