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