javaScript 操作 dom 的核心是“选中元素→操作内容 / 属性 / 结构”：先用 getElementById、querySelector 等获取元素，再通过 textContent、innerhtml、classlist 等修改内容与属性，用 createElement、appendChild 等增删改结构，最后用 addEventListener 绑定 事件。
javascript 操作 DOM 的核心，就是通过内置 API 获取、修改、添加或删除页面元素。关键不在于记多少方法，而在于理解“选中元素 → 操作内容 / 属性 / 结构”这个流程。
获取元素（选择器 是基础）
所有操作的前提是先拿到目标元素 对象：
- document.getElementById(“id”)：按 ID 获取单个元素，最快最常用
- document.querySelector(“css-selector”)：返回匹配的第一个元素（支持 class、tag、属性等任意 css 选择器）
- document.querySelectorAll(“css-selector”)：返回 nodeList（类数组），包含所有匹配元素
- document.getElementsByClassName(“cls”) 或 document.getElementsByTagName(“div”)：返回 HTMLCollection，实时集合（注意不是数组）
修改内容与属性
拿到元素后，常用方式有：
- element.textContent = “ 纯文本 ”：只改文字内容，不解析 HTML，安全且高效
- element.innerHTML = “带标签“：可插入 HTML，但需防 xss，慎用
- element.setAttribute(“data-id”, “123”) 或 element.dataset.id = “123”：设置自定义属性（data-*）
- element.className = “btn active” 或 element.classlist.add(“disabled”)：操作 class 更推荐 classList（支持 add/remove/toggle/contains）
增删改元素结构
动态构建或调整 DOM 树：
立即学习“Java 免费学习笔记（深入）”；
- document.createElement(“li”) 创建新元素
- parent.appendChild(child) 末尾追加子节点
- parent.insertBefore(newEl, refEl) 在指定元素前插入
- element.remove() 直接移除自身（现代写法，替代 parentNode.removeChild）
- element.replaceWith(newEl) 替换整个元素（包括自己）
事件绑定与响应
让 DOM 元素具备交互能力：
- element.addEventListener(“click”, handler)：推荐方式，支持多次绑定、可移除
- element.onclick = function() {…}：简单场景可用，但会覆盖之前赋值
- 事件 委托 常用：parent.addEventListener(“click”, e => {if (e.target.matches(“.item”)) {…} })，适合动态生成的子元素
DOM 操作本质是树形结构的读写。避免频繁读写（如 循环 里反复 innerHTML 赋值），批量更新优先用 DocumentFragment 或 字符串 拼接再一次性写入。
以上就是
