DOM是浏览器将HTML解析成的树状节点结构，JavaScript通过API操作节点实现动态交互；常用方法包括getElementById、querySelector等获取元素，修改textContent、style、classList等属性，以及createElement、appendChild等增删元素操作。
JavaScript DOM（文档对象模型）是浏览器将网页解析成树状结构后，提供给 JavaScript 操作的接口。它把 HTML 文档变成一个可编程的对象集合，让 JS 能读取、修改、添加或删除页面上的元素。
DOM 是什么：网页的“JS 可见版”
当你写好一个 HTML 页面，浏览器加载后并不会直接运行 HTML 代码，而是先把它解析成一棵节点树——这就是 DOM 树。每个标签（如 <div>、<p>）、文本、甚至注释，都会变成一个“节点”。JavaScript 通过 DOM API 访问和控制这些节点，实现动态交互。
比如：<h1 id="title">欢迎</h1> 在 DOM 中就是一个 Element 节点，有 id 属性、文本内容、父节点、子节点等可读写的属性和方法。
获取元素：找到你想操作的那个“人”
操作前得先定位目标元素。常用方法有：
立即学习“Java免费学习笔记（深入）”；
-
document.getElementById("id名")—— 最快，靠唯一 id 查找（如document.getElementById("title")） -
document.querySelector("CSS选择器")—— 灵活，支持类名、标签、属性等（如document.querySelector(".btn")或document.querySelector("[data-id='123']")） -
document.querySelectorAll("选择器")—— 返回所有匹配的元素 NodeList（类似数组，可遍历） -
document.getElementsByTagName("div")/getElementsByClassName("active")—— 返回 HTMLCollection，实时更新，但兼容性好
修改元素：改内容、样式、属性
拿到元素后，就能自由编辑了：
-
改文本：
el.textContent = "新文字"（安全，不解析 HTML）或el.innerHTML = "<em>加粗</em>"（可插 HTML，但注意 XSS 风险） -
改样式：
el.style.color = "red"（内联样式，驼峰写法）；更推荐加/删 class：el.classList.add("highlight")、el.classList.toggle("hidden") -
改属性：
el.setAttribute("disabled", "")或简写el.disabled = true（布尔属性建议用属性赋值）
增删元素：动态组装页面
DOM 支持完全动态构建结构：
-
创建：
document.createElement("li")+document.createTextNode("文字") -
插入：
parent.appendChild(newEl)（末尾）、parent.insertBefore(newEl, refEl)（指定位置） -
删除：
el.remove()（最简单），或parent.removeChild(el) -
替换：
parent.replaceChild(newEl, oldEl)
小技巧：批量操作可用 DocumentFragment 减少重排重绘，提升性能。
DOM 操作本质就是和浏览器“商量”怎么呈现页面。理解节点关系、选对方法、注意执行时机（比如确保元素已加载），就能稳稳控制网页行为。
