DOM是浏览器提供的接口而非JavaScript内置部分，它将HTML解析为可被JS操作的活对象树，通过document入口实现元素获取、内容修改、事件监听等操作。
DOM 不是 JavaScript 的一部分，而是浏览器提供的一套接口，JavaScript 通过它才能读写页面结构。搞不清这点，后面所有操作都会卡在“为什么改了没反应”上。
DOM 是什么：浏览器把 HTML 转成的对象树
当你写 <div id="app"><p>Hello</p></div>，浏览器解析后会生成一棵节点树：document 是根，div 是子元素，p 是孙元素。每个节点都是一个对象，有 nodeName、textContent、children 等属性，能被 JS 直接访问和修改。
关键点：
- DOM 是“活的”——修改节点会立刻反映在页面上
- DOM API 是浏览器实现的，不是 ECMAScript 标准的一部分
-
document是入口，所有操作都从它开始（比如document.getElementById()）
怎么获取元素：别只记 getElementById，得看场景选方法
不同查找方式性能、兼容性和返回值类型都不同，硬背一个容易翻车。
立即学习“Java免费学习笔记（深入）”；
-
document.getElementById("id")：最快，只返回单个元素，ID 必须唯一，注意大小写敏感 -
document.querySelector("css-selector")：支持任意 CSS 选择器（如"#nav .item:first-child"），只返回第一个匹配项；找不到时返回null，不会报错 -
document.querySelectorAll("div[data-role='menu']")：返回NodeList（类数组），支持遍历，但不是 Array，不能直接用map，得先转[...nodeList]或用Array.from() -
element.children和element.childNodes不一样：children只含元素节点，childNodes还包含文本、注释等节点
怎么改内容或属性：别混用 innerHTML 和 textContent
这是最常踩的坑：以为改了内容就完事，结果 XSS 漏洞、事件丢失、性能崩掉全来了。
-
element.textContent = "xxx"：只当纯文本处理，安全，不触发 HTML 解析，适合填用户输入的内容 -
element.innerHTML = "<strong>xxx</strong>"：会重新解析并渲染 HTML，快但危险，如果拼接了未过滤的变量（比如innerHTML = "<div>" + userInput + "</div>"），就可能执行脚本 - 改属性优先用
element.setAttribute("data-id", "123")，而不是直接赋值element.dataset.id = "123"—— 后者只同步data-开头属性，且大小写会自动转驼峰（data-user-name→dataset.userName）
监听点击却没响应？检查事件是否绑定到正确节点
常见错误是元素还没加载完就执行 JS，或者监听了静态父容器却忘了用事件委托。
- 确保 DOM 加载完成再运行操作：
document.addEventListener("DOMContentLoaded", () => { /* 你的代码 */ })，别依赖window.onload（它等所有资源，包括图片） - 动态添加的元素（比如 AJAX 加载的列表项）无法用
element.addEventListener("click", ...)直接绑定，要用事件委托：listContainer.addEventListener("click", e => { if (e.target.matches(".delete-btn")) { /* 处理删除 */ } }) -
e.preventDefault()和e.stopPropagation()别乱用：前者阻止默认行为（如表单提交、链接跳转），后者只阻止冒泡，不影响同一级其他监听器
DOM 操作本身很简单，难的是判断“该不该操作”——比如要不要重排重绘、要不要防重复绑定、要不要清理旧事件。这些细节不写在文档里，但每次卡住基本都出在这儿。
