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