优先用 document.getElementById 或 document.querySelector 获取单个 DOM 元素；修改内容用 textContent（安全）或 innerHTML（需可信）；绑定事件用 addEventListener 并善用事件委托；确保 DOM 加载完成后再操作。
直接用 document.querySelector 或 document.getElementById 获取元素，再通过属性或方法修改内容、样式、事件——这是最常用也最稳妥的路径。别一上来就写 document.getElementsByTagName 然后遍历，容易漏节点或误操作。
如何精准获取单个 DOM 元素
优先用 document.getElementById（ID 唯一且性能最快），其次用 document.querySelector（支持 CSS 选择器，语义清晰）。避免用 getElementsByClassName 或 getElementsByTagName 返回类数组，它们不支持链式调用，且返回值是实时集合，后续 DOM 变化可能影响你预期的长度或索引。
-
document.getElementById('header')→ 直接得元素，不存在则返回null -
document.querySelector('.btn.active')→ 返回第一个匹配项，没匹配到也是null - 别写
document.querySelectorAll('.item')[0]去代替querySelector，多一次遍历，没必要
修改内容和属性时要注意什么
innerHTML 和 textContent 行为差异极大：前者会解析 HTML 字符串，有 XSS 风险；后者纯文本，安全但不渲染标签。设置 src、href、className 等属性，必须用点语法或 setAttribute，别混用 class（HTML 属性名）和 className（JS 属性名）。
- 插入用户输入内容？一律用
textContent或innerText - 要插入带标签的结构？确保内容可信，再用
innerHTML；否则先用document.createElement拼接 -
el.className = 'new-class'会覆盖全部 class；追加要用el.classList.add('new-class')
绑定事件为什么推荐使用 addEventListener
onclick 属性只能绑定一个处理函数，重复赋值会覆盖；而 addEventListener 支持多次绑定、可移除、可设捕获阶段。另外，事件委托（如在父容器监听 click，用 event.target 判断来源）能显著减少内存占用，尤其适合动态增删子元素的场景。
十天学会易语言图解教程用图解的方式对易语言的使用方法和操作技巧作了生动、系统的讲解。需要的朋友们可以下载看看吧！全书分十章，分十天讲完。 第一章是介绍易语言的安装，以及运行后的界面。同时介绍一个非常简单的小程序，以帮助用户入门学习。最后介绍编程的输入方法，以及一些初学者会遇到的常见问题。第二章将接触一些具体的问题，如怎样编写一个1+2等于几的程序，并了解变量的概念，变量的有效范围，数据类型等知识。其后，您将跟着本书，编写一个自己的MP3播放器，认识窗口、按钮、编辑框三个常用组件。以认识命令及事件子程序。第
立即学习“Java免费学习笔记（深入）”；
- 不要写
btn.onclick = handler1; btn.onclick = handler2;—— 后者会干掉前者 - 正确写法：
btn.addEventListener('click', handler, { once: true })，{ once: true }表示执行一次自动解绑 - 动态列表？绑定到
ul上，检查event.target.matches('li.delete-btn')
const list = document.querySelector('#task-list');
list.addEventListener('click', (e) => {
if (e.target.matches('button.delete')) {
e.target.closest('li').remove();
}
});
DOM 操作本身不难，真正容易出问题的是时机和引用失效：比如脚本放在 里就去查 #app，结果拿到 null；或者保存了某个元素引用，之后它被 innerHTML 重写，引用就变成“孤儿节点”。确保脚本在 DOMContentLoaded 后执行，对可能被替换的元素，要么重新查询，要么用事件委托绕过直接引用。
