DOM是浏览器提供的HTML对象树接口，非JS原生；推荐用querySelector系列获取元素；更新内容优先用textContent防XSS；修改样式用el.style而非setAttribute；事件绑定必须用addEventListener并注意解绑与委托。
DOM 是浏览器把 HTML 转成的对象树，不是 JS 自带的
DOM（Document Object Model）不是 JavaScript 语言的一部分，而是浏览器提供的编程接口。HTML 文档被加载后，浏览器会解析它，生成一棵节点树——每个 <div>、<p>、甚至文本和注释，都变成一个对象（比如 HTMLElement 或 Text），挂载在全局 document 对象下。JS 通过操作这棵树来改变页面内容、结构或样式。
用 document.querySelector 和 document.querySelectorAll 找元素最稳妥
别再无脑用 getElementById 或 getElementsByClassName 了——它们返回的是“活的”集合（HTMLCollection），容易因 DOM 变动引发意外；而 querySelector 系列返回的是快照（Element 或静态 NodeList），行为更可预测。
-
document.querySelector('.btn')返回第一个匹配的元素，没找到就返回null（注意判空） -
document.querySelectorAll('input[name="email"]')返回所有匹配的元素，结果是只读的NodeList，不能直接用.push()，但能用forEach - 选择器支持完整 CSS 语法，包括伪类：
document.querySelector('button:disabled')合法 - 避免写太长的选择器链，比如
div#app > section.main ul li a[href^="/post"]—— 维护性差，也容易因 DOM 微调而断裂
修改元素内容别只记得 innerHTML，小心 XSS 和性能
innerHTML 看似方便，但它会触发 HTML 解析、重建子节点，开销大；更重要的是，如果插入用户输入的内容（比如表单值），不转义就直接拼进去，等于打开 XSS 漏洞。
- 纯文本更新优先用
textContent：el.textContent = 'Hello <script>alert(1)</script>'会原样显示，不会执行脚本 - 要插 HTML 片段且确认来源可信，才用
innerHTML；否则先用DOMPurify.sanitize(htmlStr)过滤 - 批量更新多个子节点？别反复设
innerHTML。用document.createDocumentFragment()先组装，再一次性appendChild - 改样式别直接拼字符串：
el.style.color = 'red'比el.setAttribute('style', 'color:red;')更安全、更易维护
事件绑定要用 addEventListener，别写 onclick=...
内联事件（如 <button onclick="handleClick()">）把结构和逻辑耦合死，无法动态控制，也不支持事件捕获、不支持多次绑定同一事件类型。现代写法必须用 addEventListener。
立即学习“Java免费学习笔记（深入）”；
- 同一个元素可以多次调用
addEventListener('click', fn1)和addEventListener('click', fn2)，互不影响 - 需要解绑时，必须传入**同一个函数引用**：
el.addEventListener('click', handler)→el.removeEventListener('click', handler)；用匿名函数就永远解不掉 - 监听委托场景（比如列表项动态增删），绑定到父容器，用
event.target判断实际点击元素：listEl.addEventListener('click', e => { if (e.target.matches('li.delete-btn')) { /* ... */ } }) - 注意默认行为：表单提交、链接跳转等，该
e.preventDefault()就得调，别漏
const form = document.querySelector('#search-form');
form.addEventListener('submit', function(e) {
e.preventDefault(); // 阻止页面刷新
const query = document.querySelector('#q').value.trim();
if (!query) return;
fetch(`/api/search?q=${encodeURIComponent(query)}`)
.then(r => r.json())
.then(data => {
const list = document.querySelector('#results');
list.innerHTML = data.map(item =>
`<li><a href="https://www.php.cn/link/907353eab452f43367a8c29311399935">${item.title}</a></li>`
).join('');
});
});DOM 操作看着简单，但真正稳定可靠的关键，在于理解「什么时候节点还没就绪」「哪些 API 返回的是实时集合」「事件绑定后有没有内存泄漏风险」——这些细节不踩一两次坑，很难有体感。
