DOM是浏览器将HTML转换成的JS可操作树状结构，包含节点、属性、方法和事件；通过getElementById、querySelector等获取元素；可修改内容、样式、显隐状态，并动态增删改元素。
JavaScript DOM（文档对象模型）是浏览器把 HTML 页面转换成的一个树状结构，让你能用 JavaScript 动态访问和修改网页内容。简单说，DOM 就是网页的“JS 可操作版”，有了它，你才能点击按钮弹出提示、实时更新文字、隐藏广告、切换主题……
DOM 是什么：网页的“JS 接口”
HTML 加载后，浏览器会解析它，生成一棵节点树：每个标签（如 <div>、<p>）、文本、甚至注释，都变成一个对象（叫“节点”）。这些对象统称 DOM 节点，它们有属性（比如 id、className）、方法（比如 appendChild()、remove()），还能响应事件（比如点击、输入）。
注意：DOM 不是 HTML 本身，也不是 JavaScript 语言的一部分——它是浏览器提供的 API，标准由 W3C 制定，所有现代浏览器都支持。
获取元素：先找到，才能动
操作前得先选中目标元素。常用方法有：
立即学习“Java免费学习笔记（深入）”；
-
document.getElementById("myId")—— 按唯一 id 查找，最快最常用 -
document.querySelector("button.submit")—— 用 CSS 选择器找第一个匹配项（支持.class、#id、div > p等） -
document.querySelectorAll("li.active")—— 返回所有匹配的元素 NodeList（类似数组，可遍历） -
document.getElementsByTagName("p")或getElementsByClassName("box")—— 返回 HTMLCollection，实时更新，但兼容性略老
小提醒：确保脚本在元素加载完后再运行。推荐把 JS 放在 </body> 前，或用 DOMContentLoaded 事件包裹：
document.addEventListener("DOMContentLoaded", () => { /* 获取元素、绑定事件 */ });修改内容与样式：改文字、换颜色、显隐切换
拿到元素后，就可以动手了：
- 改文字：
el.textContent = "新内容"（纯文本，防 XSS）或el.innerHTML = "<strong>加粗</strong>"（含 HTML，注意安全） - 改样式：
el.style.color = "red"（内联样式，驼峰写法，如backgroundColor）；更推荐加/删 class：el.classList.add("highlight")、el.classList.toggle("hidden") - 控制显示：
el.hidden = true（等价于display: none）或el.style.display = "none"
例子：点击按钮让段落变红并加粗
const p = document.querySelector("p");<br>document.querySelector("button").onclick = () => {<br> p.style.color = "red";<br> p.style.fontWeight = "bold";<br>};添加、删除、移动元素：动态构建页面
DOM 支持真正的“增删改查”：
- 创建新元素：
const newDiv = document.createElement("div") - 设置内容：
newDiv.textContent = "我是新来的"或newDiv.className = "card" - 插入到页面：
parentEl.appendChild(newDiv)（末尾）、parentEl.insertBefore(newDiv, targetEl)（指定位置） - 删除自己：
el.remove()（最简洁）或el.parentElement.removeChild(el) - 复制元素：
el.cloneNode(true)（true表示深拷贝，含子节点）
小技巧：批量操作建议用 DocumentFragment 减少重排重绘，但日常小改动直接 appendChild 完全够用。
基本上就这些。DOM 操作不复杂，但容易忽略执行时机和节点存在性——加个 if (el) { ... } 能避开很多报错。多练几个“点击显示/隐藏”“列表动态增删”小功能，手感就来了。
