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")
• 创建带子元素的结构，可先构建好再整体插入，减少重排

把新元素插入到页面中

插入位置决定显示效果，主要用以下方法：

• 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大段替换，既不安全也不利于维护。