🧱 1. 元素节点操作（增强版）
| 操作 | 示例 | 说明 |
|---|---|---|
📌 classList.add() / remove() / toggle() |
el.classList.toggle("active") |
优雅管理 class |
| 🔁 克隆节点 | el.cloneNode(true) |
true 表示深克隆（带内容） |
| 🪛 插入节点 | insertBefore(newEl, target) |
插入到指定元素前面 |
| 🌿 创建节点 | document.createElement("div") |
创建 DOM 节点 |
🧭 2. DOM 遍历与结构关系
| 属性/方法 | 用法 | 含义 |
|---|---|---|
parentNode |
el.parentNode |
获取父节点 |
children |
el.children |
获取所有子元素 |
firstElementChild |
el.firstElementChild |
第一个子元素 |
nextElementSibling |
el.nextElementSibling |
下一个兄弟元素 |
✅ 用这些可以做：
-
自动高亮当前 tab
-
获取点击元素的兄弟项批量修改样式
-
构建评论树结构等
🎯 3. 事件系统深入
| 知识点 | 示例 | 说明 |
|---|---|---|
| 🖇️ 事件委托 | ul.addEventListener("click", e => {...}) |
绑定到父级，识别 e.target |
| 🔂 阻止默认行为 | e.preventDefault() |
如阻止链接跳转 |
| 🛑 阻止冒泡 | e.stopPropagation() |
阻止事件向上冒泡 |
| 📍 一次性事件 | el.addEventListener("click", fn, { once: true }) |
点击一次后自动解绑 |
🧠 事件委托超常用，适合动态元素，比如评论点赞、动态删除按钮等。
🧠 4. 表单与输入处理
| 操作 | 示例 | 说明 |
|---|---|---|
| 📥 获取值 | input.value |
获取输入框内容 |
| 🧼 实时监听 | input.addEventListener("input", fn) |
实时响应输入变化 |
| 🔘 表单提交 | form.addEventListener("submit", fn) |
可配合 e.preventDefault() 拦截提交 |
🔍 5. DOM 异常处理与容错技巧
| 技巧 | 说明 |
|---|---|
❓ 使用 optional chaining（可选链） |
el?.querySelector(...) 防止 null 报错 |
| ❗ 判断是否为元素节点 | if (node.nodeType === 1) 过滤文本节点 |
🔄 使用 forEach 遍历 NodeList |
document.querySelectorAll("li").forEach(...) |
🔧 6. 动态创建结构（列表/卡片/组件）
结合：
-
createElement -
appendChild -
innerHTML
可动态创建： -
评论列表
-
商品卡片
-
自定义组件结构
📦 例子：动态添加一个 <li>：
const li = document.createElement("li");
li.innerText = "新内容";
document.querySelector("ul").appendChild(li);
🧠 总结关键词：
classList、事件委托、节点遍历、DOM克隆、insertBefore、
动态创建结构、事件 once、form input、stopPropagation、防抖节流