JavaScript 操作 DOM 的核心是获取元素、创建新元素、插入或删除节点，需理清“创建→配置→插入”或“定位→删除”链路，优先使用 textContent 防 XSS，避免 innerHTML 大段替换。
JavaScript 操作 DOM 的核心在于获取元素、创建新元素、插入或删除节点。动态创建和删除页面元素不难，关键在于理解节点关系和正确使用 API。
获取目标元素
操作前得先找到要处理的元素。常用方法有：
- document.getElementById(“id”)：通过 ID 获取单个元素（最常用）
- document.querySelector(“css选择器 ”)：支持类名、标签、属性等，返回第一个匹配项
- document.querySelectorAll(“css 选择器“)：返回所有匹配的 NodeList，可遍历
- element.parentElement / element.children：在已有元素基础上向上或向下找关联节点
动态创建新元素
用 document.createElement() 生成新节点，再设置内容或属性：
- 创建空元素：const div = document.createElement(“div”)
- 添加文本内容：div.textContent = “Hello”（推荐，防 XSS）或 div.innerHTML = “Hello“（需确保内容可信）
- 设置属性：div.className = “box” 或 div.setAttribute(“data-id”, “123”)
- 创建带子元素的结构，可先构建好再整体插入，减少重排
把新元素插入到页面中
插入位置决定显示效果，主要用以下方法：
立即学习“Java 免费学习笔记（深入）”；
- parent.appendChild(child)：加到父元素末尾
- parent.insertBefore(newNode, referenceNode)：插在指定兄弟节点之前
- parent.prepend(child)：加到父元素开头（现代 浏览器 支持）
- element.insertAdjacentHTML(position, htmlString)：position 可选 ”beforebegin”、”afterbegin”、”beforeend”、”afterend”，适合插入含 HTML 的字符串
安全删除页面元素
删除本身很简单，但要注意避免误删或内存残留：
- 先获取要删的元素：const btn = document.querySelector(“.delete-btn”)
- 调用 remove() 方法：btn.remove()（最直接）
- 或用父元素删除：btn.parentNode.removeChild(btn)
- 批量删除时，建议反向遍历 NodeList（如用 for 循环从 length- 1 递减），避免索引错乱
- 删除前可加确认逻辑，比如if (confirm(“ 确定删除？”)) {…}
掌握这几个核心步骤，就能灵活控制页面结构。重点是理清“创建→配置→插入”或“定位→删除”的链路，避免直接操作 innerHTML 大段替换，既不安全也不利于维护。
