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：
立即学习“Java免费学习笔记（深入）”；
- 改文本内容：
element.textContent = '新文字'（安全，不解析 HTML）或element.innerText（受样式影响） - 改 HTML 内容：
element.innerHTML = '<strong>加粗</strong>'（注意转义，防注入） - 改属性：
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）更直观，老项目需兼顾兼容性时再补降级方案。
