DOM是浏览器解析HTML后生成的JS可操作对象树，非HTML本身；它以document为根节点构成树形结构，元素和文本分别对应Element与Text节点，且DOM变更不影响原始HTML源码。
DOM 是浏览器把 HTML 转成的 JS 可操作对象树
DOM（Document Object Model）不是 HTML 本身，而是浏览器解析 HTML 后生成的一套 JS 对象结构。它让 document 变成一个可遍历、可修改的树形对象——html 元素是根，head 和 body 是子节点，每个标签都对应一个 Element 实例，文本内容则是 Text 节点。
关键点：DOM 和 HTML 字符串不等价。比如你用 JS 删除一个元素，HTML 源码没变，但 DOM 树里它已经不存在了；反之，直接改 innerHTML 会重建子节点，可能丢失事件监听器或表单输入值。
用 querySelector 和 getElementById 找元素最常用
找元素的本质是「从 document 开始按条件筛选节点」。现代写法优先用 querySelector 系列，兼容性好且语法统一：
-
document.getElementById("myId")：最快，但只能靠id，且返回null而非空数组 -
document.querySelector(".btn")：返回第一个匹配的Element，没找到返回null -
document.querySelectorAll("input[type='text']")：返回NodeList（类数组），支持forEach，但不支持map或展开运算符（需先转数组：[...nodelist]） - 别用
getElementsByClassName或getElementsByTagName：返回的是「动态集合」，后续 DOM 变化会实时反映在该集合中，容易引发意料外的循环长度变化
改内容、属性、样式得区分 API 类型
不同修改目标对应不同方法，混用会导致静默失败或不符合预期：
立即学习“Java免费学习笔记（深入）”；
- 改文本内容：
el.textContent = "新文字"（安全，防 XSS）或el.innerText（受 CSS 影响，会触发重排） - 改 HTML 结构：
el.innerHTML = "加粗"（注意引号转义），但会销毁子节点上的事件监听器 - 改属性：
el.setAttribute("disabled", "")或更推荐的属性访问器：el.disabled = true（布尔属性如disabled、checked必须用后者，否则设空字符串也不生效） - 改行内样式：
el.style.color = "red"（注意驼峰命名），批量设样式建议切换className或操作classList
事件绑定必须等元素存在，否则 querySelector 返回 null
脚本执行时机不对是新手最常踩的坑。如果 JS 在 里执行，而目标元素在 底部，querySelector 就找不到它。
解决方式只有两个可靠选择：
- 把
放在前（最简单直接） - 用
DOMContentLoaded事件：document.addEventListener("DOMContentLoaded", () => { const btn = document.querySelector("#submit"); if (btn) btn.addEventListener("click", handler); });
别依赖 window.onload：它要等所有图片、CSS 加载完，延迟更大；也别在 setTimeout 里轮询查找——不可靠且浪费性能。
真实项目里，哪怕用了框架，DOM 存在性检查（if (el)）和事件委托（document.addEventListener("click", e => {...})）仍是绕不开的基本功。
