用 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 ' 会原样显示，不会执行脚本
• 要插 HTML 片段且确认来源可信，才用 innerHTML；否则先用 DOMPurify.sanitize(htmlStr) 过滤
• 批量更新多个子节点？别反复设 innerHTML。用 document.createDocumentFragment() 先组装，再一次性 appendChild
• 改样式别直接拼字符串：el.style.color = 'red' 比 el.setAttribute('style', 'color:red;') 更安全、更易维护

事件绑定要用 addEventListener，别写 onclick=...

内联事件（如 ）把结构和逻辑耦合死，无法动态控制，也不支持事件捕获、不支持多次绑定同一事件类型。现代写法必须用 addEventListener。

• 同一个元素可以多次调用 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 => 
        `
${item.title}
`
      ).join('');
    });
});

DOM 操作看着简单，但真正稳定可靠的关键，在于理解「什么时候节点还没就绪」「哪些 API 返回的是实时集合」「事件绑定后有没有内存泄漏风险」——这些细节不踩一两次坑，很难有体感。