DOM是浏览器将HTML转换成的可编程树状结构，每个元素为对象，支持读取、修改、添加或删除；常用获取方法有getElementById、querySelector等；可修改innerHTML、textContent、style及classList；新增用createElement+appendChild，删除用remove，替换用replaceChild。
JavaScript DOM（文档对象模型）是浏览器把 HTML 页面转换成的一个可编程的树状结构，每个 HTML 元素都变成一个对象，你可以用 JavaScript 去读取、修改、添加或删除它们。
DOM 是什么？
DOM 不是 HTML 本身，而是 HTML 在浏览器内存中的一份“活的映射”。比如你写了一个 Hello，浏览器加载后就会生成一个对应的 DOM 对象，它有属性（如 id、className）、方法（如 appendChild()）和事件（如 click）。这个对象可以被 JS 实时操作，页面也会立刻更新。
如何获取网页中的元素？
常用方法有这几个：
- document.getElementById("id名")：通过唯一 ID 获取单个元素，最常用也最快
- document.querySelector("CSS选择器")：支持类名（.btn）、标签（p）、属性（[data-id]）等，只返回第一个匹配项
- document.querySelectorAll("CSS选择器")：返回所有匹配的元素集合（NodeList），可遍历
- document.getElementsByClassName("类名") 或 document.getElementsByTagName("标签名")：返回 HTMLCollection，注意不是数组，要用 Array.from() 转换才能用 forEach
怎么修改元素的
内容和样式？
内容和样式？拿到元素后，就可以直接改它的属性：
-
innerHTML：设置或读取元素内的 HTML 字符串（含标签），比如
el.innerHTML = "Hi" - textContent：只处理纯文本，不解析 HTML，更安全，防 XSS
-
element.style.xxx：直接改行内样式，如
el.style.color = "red"；注意 CSS 属性要转成驼峰，比如backgroundColor对应background-color -
element.className 或 element.classList：推荐用
classList.add()、classList.toggle()等方法增删类名，比拼字符串更可靠
如何添加、删除或替换元素？
DOM 操作的核心是“节点关系”：
-
document.createElement("标签名") 创建新元素，再用
appendChild()插入到某个父元素末尾 - parentNode.insertBefore(newEl, referenceEl) 把新元素插在指定元素前面
- element.remove() 直接删掉自己（现代浏览器支持）
- parentNode.replaceChild(newEl, oldEl) 替换子元素
- 插入 HTML 字符串可用
insertAdjacentHTML(position, htmlString)，position 可选"beforebegin"、"afterend"等，灵活且不重绘整个父容器
DOM 操作不复杂但容易忽略细节，比如获取元素时确保 DOM 已加载完（放在 DOMContentLoaded 事件里），或者批量修改样式时优先用 class 切换而不是反复设 style。掌握这些，就能稳稳地控制网页行为和外观。
