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