JS DOM节点操作
学习 createElement/appendChild/remove · 难度：进阶 · +15XP
JavaScript DOM 节点操作大全
DOM（Document Object Model，文档对象模型）是浏览器将 HTML 文档解析为树形结构的编程接口。JavaScript 通过 DOM API 可以动态地创建、查找、修改和删除页面上的任意元素，这是实现动态网页交互的基础。
查找 DOM 节点
| 方法 | 说明 | 返回值 |
|---|---|---|
document.getElementById(id) | 通过 ID 查找 | 单个元素或 null |
document.querySelector(css) | CSS 选择器查第一个 | 单个元素或 null |
document.querySelectorAll(css) | CSS 选择器查全部 | 静态 NodeList |
el.getElementsByClassName(cls) | 通过 class 查找 | 动态 HTMLCollection |
el.getElementsByTagName(tag) | 通过标签名查找 | 动态 HTMLCollection |
el.closest(css) | 向上查找最近的祖先 | 单个元素或 null |
创建与插入节点
- 使用
document.createElement(tag)创建元素 - 使用
document.createTextNode(text)创建文本节点 - 通过
appendChild、insertBefore、innerHTML等方式插入
// 创建元素
const div = document.createElement("div");
div.className = "box";
div.textContent = "这是新创建的 div";
div.setAttribute("data-id", "123");
// 追加到父元素末尾
document.body.appendChild(div);
// 插入到指定元素之前
const ref = document.getElementById("target");
document.body.insertBefore(div, ref);
// 使用 insertAdjacentHTML（更灵活）
ref.insertAdjacentHTML("beforebegin", "
前面
");
ref.insertAdjacentHTML("afterend", "后面
");
ref.insertAdjacentHTML("afterbegin", "第一个子元素");
ref.insertAdjacentHTML("beforeend", "最后一个子元素");节点属性与遍历
const el = document.querySelector(".container");
// 节点关系属性
el.parentNode; // 父节点
el.children; // 子元素集合（HTMLCollection，不含文本节点）
el.childNodes; // 所有子节点（含文本、注释节点）
el.firstElementChild; // 第一个子元素
el.lastElementChild; // 最后一个子元素
el.previousElementSibling; // 前一个兄弟元素
el.nextElementSibling; // 后一个兄弟元素
// 修改元素内容
el.textContent = "纯文本内容"; // 安全，自动转义 HTML
el.innerHTML = "HTML内容"; // 解析为 HTML
// 操作类名
el.classList.add("active");
el.classList.remove("hidden");
el.classList.toggle("dark");
el.classList.contains("active"); // true/false
// 删除节点
const old = document.getElementById("old");
old.remove(); // 从 DOM 中移除
old.parentNode.removeChild(old); // 传统方式