优先用 getElementById 获取元素，速度快且返回单个元素或 null；querySelector 支持 CSS 选择器但只返首个匹配项；修改内容用 textContent（安全）或 innerHTML（需信任来源）；设属性优先直接访问内置属性，自定义属性用 setAttribute；动态元素事件用委托，移除时须用同一函数引用。
直接用 document.querySelector 或 document.getElementById 获取元素，再通过属性或方法修改内容、样式、事件——这是最常用也最稳妥的路径。别一上来就写 document.getElementsByTagName 然后遍历，容易漏判空值或类型错误。
获取 DOM 元素时，选 querySelector 还是 getElementById？
优先用 getElementById：它只认 ID，速度快、无歧义、返回单个元素（或 null），适合有明确 ID 的场景；querySelector 更灵活，支持 CSS 选择器，但要注意它只返回第一个匹配项，且不支持伪类（如 :hover）；如果真要找多个，用 querySelectorAll，它返回的是 NodeList，不是数组，不能直接用 map 或 forEach（得先转成数组或用 for...of）。
-
document.getElementById('btn')→ 返回Element或null -
document.querySelector('.item.active')→ 返回第一个匹配的Element或null -
document.querySelectorAll('input[type="text"]')→ 返回NodeList，需Array.from()或循环遍历
修改内容和属性，别混用 innerHTML 和 textContent
innerHTML 解析 HTML 字符串，有 XSS 风险，仅在你完全信任内容来源时才用；textContent 只当纯文本处理，安全、快，适合填用户输入、API 返回的字符串；设属性用 element.setAttribute('data-id', '123')，读属性用 element.getAttribute('data-id')，但内置属性（如 id、className、value）建议直接访问 el.id、el.className、el.value，更可靠（尤其表单控件的 value 值以属性为准，而非 getAttribute('value')）。
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
- 显示用户昵称：
el.textContent = userName（别用innerHTML） - 插入带样式的提示：
el.innerHTML = '必填'（确认内容可信） - 动态设自定义属性：
btn.setAttribute('data-loading', 'true')
绑定事件时，注意事件委托和移除时机
给动态生成的元素（比如列表项）绑事件，别每个都调用 addEventListener，改用事件委托：在父容器上监听，用 event.target 判断是否命中目标；另外，用 addEventListener 添加的监听器，必须用 removeEventListener 移除——而且函数引用必须是同一个，匿名函数无法移除；若需多次添加/移除，把回调定义为具名函数或存在变量里。
- 委托示例：
listEl.addEventListener('click', e => { if (e.target.matches('.delete-btn')) { /* 处理删除 */ } }) - 错误写法：
el.addEventListener('click', () => {...})→ 后续无法精确移除 - 正确写法：
const handler = () => {...}; el.addEventListener('click', handler); el.removeEventListener('click', handler);
DOM 操作本身不难，真正卡住人的往往是「获取不到」、「改了没反应」、「事件重复绑定」这三类问题——核心在于每次操作前确认元素存在、类型正确、作用域清晰，而不是堆砌技巧。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
