DOM是浏览器提供的JS与HTML交互的接口，将HTML解析为可操作的对象树；常用方法包括getElementById、querySelector等；修改内容优先用textContent，事件监听须用addEventListener并注意函数引用。
JavaScript DOM 不是某种独立技术，而是浏览器提供的一套接口，让你能用 JavaScript 读取、修改、删除或创建网页里的元素。它不是语法糖，也不是框架，而是一层“桥梁”——连接 JS 代码和 HTML 文档的实时映射。
DOM 是什么：不是 HTML 字符串，而是活的对象树
加载完 HTML 后，浏览器会把它解析成一棵节点树（Document Object Model），每个 <div>、<code><p></p>、甚至文字都变成可操作的 JavaScript 对象。这意味着：
-
document.getElementById("btn")返回的是一个对象，不是字符串，可以链式调用.addEventListener()或修改.style.color - 直接改
innerHTML会触发重新解析 HTML，可能丢失已绑定的事件监听器 -
document.querySelector("input[name='email']")和document.querySelectorAll(".item")返回的是实时或静态 NodeList，注意是否支持.forEach()（老版本 IE 不支持）
获取元素的常用方法及坑点
选错方法会导致查不到、查多、或性能掉帧。关键看你要不要实时响应变化，以及兼容性要求：
- 只取第一个匹配项：
document.getElementById("id")（最快，但只能用 ID）、document.querySelector(".class")（支持复杂选择器，但不返回全部） - 取全部匹配项：
document.querySelectorAll(".item")返回NodeList（可用[...nodelist].forEach()或Array.from()转数组）；document.getElementsByTagName("div")返回HTMLCollection（动态集合，循环中删元素易出错） - 别用
document.getElementByClassName（拼写错误！正确是getElementsByClassName，注意末尾是s） - 在
DOMContentLoaded事件之后再查询，否则可能拿到null—— 尤其当脚本放在里时
修改内容、属性和样式的三类典型操作
表面看都是“改东西”，但底层机制不同，误用会引发重排（reflow）、内存泄漏或 XSS 风险：
立即学习“Java免费学习笔记（深入）”；
- 改文本内容优先用
textContent（安全、快），而非innerHTML（会解析 HTML，有注入风险，且触发重绘） - 改自定义属性用
element.setAttribute("data-id", "123")，读取用element.getAttribute("data-id")；但内置属性如src、href、value更推荐直接访问element.src、element.value（更可靠，尤其表单值） - 改样式尽量用
element.classList.add("active")或element.style.setProperty("--color", "#333")，少用element.style.color = "red"（驼峰写法易错，且覆盖全部内联样式）
事件监听必须用 addEventListener，别直接赋值 onclick
直接写 btn.onclick = handler 会覆盖之前绑定的同类型监听器，且无法控制捕获/冒泡阶段：
- 用
element.addEventListener("click", handler, { once: true })可自动解绑一次性的事件 - 委托事件时，监听父容器的
click，再用event.target.matches("button.delete")判断来源，避免为每个子元素重复绑定 - 移除监听器必须传入**同一个函数引用**，匿名函数无法被移除：
btn.addEventListener("click", fn); btn.removeEventListener("click", fn);
DOM 操作本身很简单，难的是判断该用哪个 API、何时更新、要不要清理。比如动态插入带事件的列表项，漏掉事件委托或未销毁旧监听器，很快就会出现点击多次触发、内存占用飙升的问题。
