如何操作节点_javascript中增删改查DOM元素的方法？

JavaScript操作DOM的核心是查（getElementById、querySelector等）、增（createElement+appendChild）、删（remove或removeChild）、改（textContent、innerHTML、setAttribute、classList等）。

在 JavaScript 中操作 DOM 元素（增删改查）是前端开发的基础能力，核心在于获取元素、创建新节点、插入/替换/删除节点、以及修改内容或属性。下面按常用场景分块说明，不绕弯子，直接上实用方法。

如何新增 DOM 元素？

新增 = 创建 + 插入。不能只用 document.createElement() 就完事，必须挂到页面某个父节点下才可见。

• 先用 document.createElement('div') 创建元素节点，或 document.createTextNode('文本') 创建文本节点
• 用 parentNode.appendChild(child) 追加到最后；或用 parentNode.insertBefore(newNode, referenceNode) 插入到指定节点前
• 也可以用 innerHTML 或 insertAdjacentHTML(position, htmlString) 批量插入（注意 XSS 风险，慎拼接用户输入）

如何删除 DOM 元素？

DOM 没有直接的 .remove() 方法（老浏览器不支持），但现代写法很简洁：

• 推荐：直接调用 element.remove() —— 现代浏览器（Chrome 27+、Firefox 23+、Edge 12+、Safari 9+）都支持
• 兼容写法：用 element.parentNode.removeChild(element)
• 清空子节点：设 parent.innerHTML = '' 或循环调用 parent.lastChild.remove()

如何修改 DOM 元素？

修改包括改内容、改属性、改样式、改结构位置等，按需选择对应 API：

• 改文本内容：element.textContent = '新文字'（安全，不解析 HTML）或 element.innerText（受样式影响）
• 改 HTML 内容：element.innerHTML = '加粗'（注意转义，防注入）
• 改属性：element.setAttribute('class', 'btn active') 或直接赋值 element.className = 'btn active'
• 改样式：element.style.color = '#333'（内联样式），或操作 class：element.classList.add('hidden') / .toggle() / .remove()

如何查找 DOM 元素？

查是所有操作的前提，优先用语义明确、性能较好的方法：

• 按 ID 最快：document.getElementById('myId')（返回单个元素，无匹配则 null）
• 按类名：document.getElementsByClassName('box')（返回 HTMLCollection，动态集合）或 document.querySelectorAll('.box')（返回静态 NodeList，推荐）
• 按标签名：document.getElementsByTagName('p')（也是 HTMLCollection）
• 通用查询：document.querySelector('.header h1')（返回第一个匹配）和 document.querySelectorAll('button[data-action]')（返回全部匹配 NodeList）
• 关系查找：element.parentElement、element.children、element.nextElementSibling 等

基本上就这些。记住：查是前提，增删改都要基于已有节点操作；现代 API（如 remove()、classList、querySelector）更直观，老项目需兼顾兼容性时再补降级方案。