DOM是浏览器将HTML解析成的对象树，document为根节点；JavaScript通过DOM API（如getElementById）操作页面，而非语言原生能力。
DOM 不是 JavaScript 的一部分，而是浏览器提供的编程接口；JavaScript 通过它才能读取、修改网页结构。你写的 document.getElementById() 或 element.classList.add() 全部依赖 DOM API，不是 JS 语言原生能力。
DOM 是什么：浏览器把 HTML 转成的对象树
加载 HTML 后，浏览器会解析它，生成一棵节点树（Document Object Model），每个标签（ 关键点： 选错方法会导致查不到元素、返回类型不符、或兼容性问题。注意返回值类型和适用场景： 错误常见于：用 别用 、）、文本、注释都变成一个对象（Element、Text、Comment）。这棵树的根节点是 document，所有操作都从它开始。
document 是 DOM 的入口，不是全局变量也不是 JS 内置对象parentNode、childNodes、nextSibling 等属性反映 HTML 结构常用获取元素的方法及其差异
document.getElementById("id")：只返回单个元素，ID 必须唯一，不支持 CSS 选择器document.querySelector("css-selector")：返回第一个匹配元素，支持复杂选择器如 "nav ul li.active"
document.querySelectorAll("css-selector")：返回 NodeList（类数组，非 Array），需用 [...nodeList] 展开才能用 map() 等document.getElementsByClassName("cls")：返回实时 HTMLCollection，DOM 变动会自动更新内容，但不能直接调用 forEach
getElementsByClassName 返回结果直接链式调用 .style.color = "red" —— 它返回的是集合，不是单个元素。修改元素内容与属性的正确方式
innerHTML 直接拼接用户输入，也别把 value 当作所有表单控件的通用取值方式：
- 设文本内容优先用
textContent（安全、快），仅当需渲染 HTML 时才用innerHTML - 表单元素取值：
和用.value；用.value或.selectedOptions[0].value；用.checked - 设属性用
element.setAttribute("attr", "val")，但内置属性（如id、className、disabled）应直接赋值：el.id = "new-id"、el.className = "a b"、el.disabled = true
const btn = document.querySelector("button");
btn.textContent = "已提交"; // ✅ 安全设置文本
btn.setAttribute("data-status", "done"); // ✅ 自定义属性
btn.disabled = true; // ✅ 布尔属性直接赋值，不用 setAttribute
事件监听必须用 addEventListener，不要写 onclick=...
内联事件（
