操作dom遵循“选—改—增—删—交互”五步闭环：精准选取节点、稳准修改内容与属性、先造后挂添加节点、安全删除与替换，并注意nodelist处理、null判断及兼容性。
直接上手做，重点在“选—改—增—删—交互”五步闭环，不堆概念，只练真动作。
一、先精准获取你要操作的节点
别硬记方法名，按场景选：
- 找唯一元素（比如登录按钮）→ document.getElementById("loginBtn")
- 找一类元素（比如所有商品卡片）→ document.querySelectorAll(".product-card")
- 找父级下的第一个标题 → section.querySelector("h2")
- 找当前点击元素的兄弟节点 → e.target.nextElementSibling
小提醒：querySelectorAll 返回的是 NodeList，不是数组，要用 [...nodeList] 展开再 forEach；getElementById 找不到时返回 null，记得加 if 判断。
二、内容与属性改得稳又准
内容分两类，别混用：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 只显示纯文字（如表单提示、错误信息）→ 用 textContent（安全、快、不解析 HTML）
- 要插入带标签的结构（如动态生成列表项、富文本摘要）→ 用 innerHTML（注意 XSS 风险，内容可信才用）
- 改属性优先用 element.setAttribute("data-id", "102") 或简写 element.dataset.id = "102"；改 class 推荐 element.classList.add("active") 而不是直接拼字符串
三、动态添加节点要“先造后挂”
三步不能跳：
-
createElement 创建新节点（如
const li = document.createElement("li")） -
配置内容和属性（
li.textContent = "新选项"; li.className = "menu-item"） -
append 或 prepend 到目标父容器（
ul.appendChild(li)或ul.append(li)）
补充技巧：想插到某个已有子节点前？用 parentNode.insertBefore(newNode, referenceNode)；批量插入多个节点？直接传入多个参数给 append，比如 parent.append(li1, li2, li3)。
四、删除与替换要防“找不到”和“误删”
安全删除两原则：
- 先确认节点存在：
if (node && node.parentNode) { node.parentNode.removeChild(node); } - 更现代写法：
node.remove()（简洁，但注意 IE 不支持） - 替换节点用 parentNode.replaceChild(newNode, oldNode)；如果只是换内容，通常用 innerHTML 或 textContent 更轻量
实战常见坑：循环删除 NodeList 时长度会变，建议倒序遍历或转成数组再 filter。
