DOM是浏览器解析HTML后生成的内存中对象树，每个节点对应可编程JS对象，不等于原始HTML字符串；获取元素优先用getElementById、querySelector、querySelectorAll；修改内容用textContent或innerHTML，属性用点号或setAttribute，样式用className或classList；事件需确保DOM就绪，动态元素用事件委托。
DOM 是网页的树状结构映射，不是 HTML 字符串
JavaScript 中的 DOM（Document Object Model）是浏览器将 HTML 解析后生成的内存中对象树，每个节点（如 常见误解：以为 优先按场景选，别无脑用 注意： 立即学习“Java免费学习笔记（深入）”； 不同目的必须用不同 API，混用会导致不可见副作用： 性能提示：频繁修改多个样式时，避免连续写 脚本执行早于 DOM 加载完成，是 、文本内容）都对应一个可编程的 JS 对象。它不等于原始 HTML 源码——比如你用 JS 修改了 innerHTML，DOM 树会立刻更新，但 document.documentElement.outerHTML 返回的是当前实时状态，未必和初始 HTML 一致。document.getElementById('x') 返回的是字符串或 HTML 片段。实际返回的是一个 Element 对象，有属性（id、className）、方法（appendChild()、remove()）和事件接口（addEventListener()）。获取元素最常用且安全的三种方式
querySelector：
document.getElementById('myBtn') —— 唯一 ID，最快，返回单个 Element 或 nulldocument.querySelector('.nav-link[data-active="true"]') —— 支持任意 CSS 选择器，只返回第一个匹配项；若没匹配，返回 null（不是空数组！）document.querySelectorAll('input[type="checkbox"]') —— 返回 NodeList（类数组），可用 forEach，但不能直接用 map（需转成数组：[...nodeList].map(...)）getElementsByClassName 和 getElementsByTagName 返回的是动态 HTMLCollection，后续 DOM 变化会实时反映在该集合中，容易引发无限循环或意外重读 —— 新项目尽量避开。修改内容、属性和样式的三类典型操作
el.textContent = '新标题'（安全，防 XSS）；el.innerHTML = '强调'（危险，仅当可信 HTML 才用）el.setAttribute('disabled', '') 或更推荐 el.disabled = true（布尔属性优先用点号赋值）el.style.color = '#333'（仅内联样式）；批量改样式优先用 el.classList.add('active') 或 el.className = 'btn btn-primary'
el.style.xxx，应改用 el.className 切换预定义 CSS 类，或用 el.setAttribute('style', '...') 一次性写入。事件绑定必须等元素存在，否则拿到 null
getElementById 返回 null 的最常见原因：
