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>、<code><p></p>）、文本、注释都变成一个对象（Element、Text、Comment）。这棵树的根节点是 document，所有操作都从它开始。
关键点：
-
document是 DOM 的入口，不是全局变量也不是 JS 内置对象 - DOM 节点有层级关系：
parentNode、childNodes、nextSibling等属性反映 HTML 结构 - DOM 变化会立即触发页面重绘（但批量操作时要注意性能）
常用获取元素的方法及其差异
选错方法会导致查不到元素、返回类型不符、或兼容性问题。注意返回值类型和适用场景：
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
立即学习“Java免费学习笔记（深入）”；
-
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></textarea>用.value；<select></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> —— 支持多次绑定、可传参（用闭包或 <code>bind）、可指定{ once: true, capture: false }- 移除时必须传入**同一个函数引用**：
element.removeEventListener("click", handler)，匿名函数无法移除 - 动态添加的元素要委托到父级（事件委托）：
document.querySelector("ul").addEventListener("click", e => { if (e.target.tagName === "LI") { ... } })
容易忽略的一点：监听器里 this 指向当前触发事件的元素，但箭头函数会丢失它 —— 所以事件回调别用箭头函数，除非你明确不需要 this。
