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→ 显示为字面量' Hello - 改 HTML：
el.innerHTML = 'Bold'→ 渲染加粗，但若字符串来自用户输入，必须先过滤或使用DOMPurify - 设属性：
el.setAttribute('data-id', '123')或更
现代的
el.dataset.id = '123'（仅限data-属性） - 不要用
el.value = 'xxx'改非表单元素内容——它只对、有效
增删节点：用 appendChild / insertAdjacentElement，不用 document.write
document.write 在页面加载完成后调用会清空整个文档，已属反模式；动态添加元素应创建节点后挂载，或用 insertAdjacentHTML（需注意 XSS）。
- 创建并追加：
const div = document.createElement('div'); div.textContent = 'New item'; document.body.appendChild(div); - 在指定位置插入 HTML：
el.insertAdjacentHTML('beforeend', '—— 比after
')innerHTML +=安全（不重绘全部子节点） - 删除自身：
el.remove()（简洁）或el.parentNode.removeChild(el)（兼容 IE） - 批量操作大量节点时，先用
DocumentFragment缓存再一次性挂载，减少重排
事件绑定：始终用 addEventListener，禁用 onclick=... 内联写法
内联事件绑定（如
