javascript如何操作DOM_常用DOM方法有哪些？

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=... 内联写法

内联事件绑定（如 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) 看一眼结构，比查文档更快。

">