JavaScript操作DOM的核心是掌握「查、改、增、删、绑」五类动作的现代API：查用querySelector/querySelectorAll/getElementById；改用textContent/setAttribute；增删用createElement/append/remove；绑用addEventListener。
JavaScript 操作 DOM 的核心不是记住所有方法，而是清楚「查、改、增、删、绑」这五类动作对应哪些可靠且现代的 API。老式方法（如 document.write、innerHTML 直接拼接）在多数场景下应避免。
查元素：用 querySelector 和 getElementById 而非 getElementsByName
现代项目中优先使用 querySelector（支持 CSS 选择器语法）和 getElementById（最快，原生 ID 查找）。getElementsByName 返回的是 HTMLCollection，且 name 属性在 HTML 中语义模糊、易冲突；getElementsByTagName 同样返回动态集合，性能差且不直观。
-
document.querySelector('.btn')—— 返回第一个匹配元素，不存在时返回null（安全，可直接判空） -
document.querySelectorAll('input[type="text"]')—— 返回静态NodeList，支持forEach -
document.getElementById('header')—— 比querySelector('#header')略快，ID 唯一前提下推荐 - 避免
document.getElementsByName('age')：name 不是标准定位依据，表单外无意义，且同名元素多时逻辑难控
改内容与属性：用 textContent 和 setAttribute，慎用 innerHTML
textContent 是设置纯文本最安全的方式，自动转义 HTML 字符，防 XSS；innerHTML 只在明确需要插入结构化 HTML 时使用，且必须确保内容可信。
- 改文本：
el.textContent = 'Hello <world>'</world>→ 显示为字面量Hello <world></world> - 改 HTML：
el.innerHTML = '<strong>Bold</strong>'→ 渲染加粗，但若字符串来自用户输入，必须先过滤或使用DOMPurify - 设属性：
el.setAttribute('data-id', '123')或更现代的el.dataset.id = '123'（仅限data-属性） - 不要用
el.value = 'xxx'改非表单元素内容——它只对<input>、<textarea></textarea>有效
增删节点：用 appendChild / insertAdjacentElement，不用 document.write
document.write 在页面加载完成后调用会清空整个文档，已属反模式；动态添加元素应创建节点后挂载，或用 insertAdjacentHTML（需注意 XSS）。
立即学习“Java免费学习笔记（深入）”；
- 创建并追加：
const div = document.createElement('div'); div.textContent = 'New item'; document.body.appendChild(div); - 在指定位置插入 HTML：
el.insertAdjacentHTML('beforeend', '<p>after</p>')—— 比innerHTML +=安全（不重绘全部子节点） - 删除自身：
el.remove()（简洁）或el.parentNode.removeChild(el)（兼容 IE） - 批量操作大量节点时，先用
DocumentFragment缓存再一次性挂载，减少重排
事件绑定：始终用 addEventListener，禁用 onclick=... 内联写法
内联事件绑定（如 <button onclick="handle()>）将 JS 逻辑耦合进 HTML，无法动态控制、难以测试，且每次赋值会覆盖前一个监听器。
- 正确方式：
const btn = document.querySelector('#save'); btn.addEventListener('click', function(e) { console.log('clicked', e.target); }); - 移除监听器需保留函数引用：
btn.removeEventListener('click', handler)；匿名函数无法被移除 - 用
{ once: true }选项实现「执行一次即销毁」，适合初始化逻辑 - 委托事件用
document.addEventListener('click', e => { if (e.target.matches('.item')) {...} })，比给每个子项单独绑定更高效
真正容易出错的地方不在「会不会用」，而在于混淆返回值类型（NodeList vs HTMLCollection vs 单个元素）、忽略节点是否真实存在（querySelector 返回 null 时直接调用 .innerText 报错），以及在循环中错误复用同一个元素对象导致渲染异常。动手前先 console.dir(el) 看一眼结构，比查文档更快。
