DOM是HTML在内存中的结构化对
象树，提供getElementById、querySelector等方法获取元素，支持textContent、innerHTML等修改内容，createElement等动态操作节点，并通过addEventListener响应用户交互。
DOM（Document Object Model）是浏览器把 HTML 文档解析成的一棵对象树，每个网页元素（比如 、如何获取网页元素
常用方法有：
-
document.getElementById("id")：通过唯一 id 获取单个元素，最常用也最快
-
document.querySelector("css选择器")：支持类名（
.btn）、标签（h2）、属性（[data-id]）等，只返回第一个匹配项
-
document.querySelectorAll("css选择器")：返回所有匹配元素的静态 NodeList（类似数组，可遍历）
-
document.getElementsByClassName("cls") 或 document.getElementsByTagName("div")：返回 HTMLCollection，实时更新，但兼容性略老，现在多用 querySelector 系列
如何修改元素内容和属性
拿到元素后，就能读写它的内容与状态：
-
element.textContent：设置或读取纯文本内容（不解析 HTML，防 XSS 更安全）
-
element.innerHTML：设置或读取含 HTML 标签的内容（注意：会重新解析并渲染，慎用于用户输入）
-
element.setAttribute("name", "value") 或直接 element.name = "value"（对内置属性如
id、className、src 有效）
-
element.classList.add/remove/toggle("cls")：安全操作 CSS 类名，比直接改
className 更可靠
如何创建、插入和删除元素
动态构建页面结构的关键步骤：
-
document.createElement("div")：创建新元素节点
-
element.appendChild(newNode)：在末尾添加子节点
-
element.insertBefore(newNode, referenceNode)：在指定位置前插入
-
element.remove()：直接删除自身（现代写法，替代
parentNode.removeChild(element)）
-
element.replaceWith(newNode)：用新节点替换当前节点
如何响应用户交互
给元素绑定事件，让页面“活起来”：
-
element.addEventListener("click", handler)：推荐方式，支持多次绑定同一事件，且可移除（
removeEventListener）
-
element.onclick = function() {...}：简单场景可用，但会覆盖之前的 onclick
- 常见事件名：
"input"（表单输入）、"submit"（表单提交）、"keydown"（键盘按下）、"change"（选中/值变更）等
- 事件处理函数中，
this 指向触发事件的元素；也可用 event.target 明确获取目标节点
象树，提供getElementById、querySelector等方法获取元素，支持textContent、innerHTML等修改内容，createElement等动态操作节点，并通过addEventListener响应用户交互。
