DOM是HTML在内存中的结构化对象树，提供getElementById、querySelector等方法获取元素，支持textContent、innerHTML等修改内容，createElement等动态操作节点，并通过addEventListener响应用户交互。
DOM（Document Object Model）是浏览器把 HTML 文档解析成的一棵对象树，每个网页元素（比如 <div>、<p>、<button>）都变成一个可被 JavaScript 访问和操作的“节点”。它不是 HTML 本身，而是 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更可靠
如何创建、插入和删除元素
动态构建页面结构的关键步骤：
立即学习“Java免费学习笔记（深入）”；
- 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明确获取目标节点
