DOM是浏览器将HTML解析成的对象树，document为根节点；JavaScript通过DOM API（如getElementById）操作页面，而非语言原生能力。
DOM 不是 JavaScript 的一部分，而是浏览器提供的编程接口；JavaScript 通过它才能读取、修改网页结构。你写的 document.getElementById() 或 element.classList.add() 全部依赖 DOM API，不是 JS 语言原生能力。
DOM 是什么：浏览器把 HTML 转成的对象树
加载 HTML 后，浏览器会解析它，生成一棵节点树（Document Object Model），每个标签（<div>、<p>）、文本、注释都变成一个对象（Element、Text、Comment）。这棵树的根节点是 document，所有操作都从它开始。
关键点：
-
document是 DOM 的入口，不是全局变量也不是 JS 内置对象 - DOM 节点有层级关系：
parentNode、childNodes、nextSibling等属性反映 HTML 结构 - DOM 变化会立即触发页面重绘（但批量操作时要注意性能）
常用获取元素的方法及其差异
选错方法会导致查不到元素、返回类型不符、或兼容性问题。注意返回值类型和适用场景：
立即学习“Java免费学习笔记（深入）”；
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
-
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 - 表单元素取值：
<input type="text">和<textarea>用.value；<select>用.value或.selectedOptions[0].value；<input type="checkbox">用.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=...
内联事件（<button onclick="handle()>）和直接赋值（el.onclick = fn）都只能绑定一个处理函数，且难以移除。现代写法统一用：
-
element.addEventListener("click", handler)—— 支持多次绑定、可传参（用闭包或bind）、可指定{ once: true, capture: false } - 移除时必须传入**同一个函数引用**：
element.removeEventListener("click", handler)，匿名函数无法移除 - 动态添加的元素要委托到父级（事件委托）：
document.querySelector("ul").addEventListener("click", e => { if (e.target.tagName === "LI") { ... } })
容易忽略的一点：监听器里 this 指向当前触发事件的元素，但箭头函数会丢失它 —— 所以事件回调别用箭头函数，除非你明确不需要 this。
