【JS】一站式掌握 DOM 操作（实用 + 清晰 + 示例）

🧭 目录导航：

1. DOM 选择元素
2. 添加 / 修改元素
3. 删除元素
4. 事件绑定
5. 事件委托
6. 表单处理与校验

---

🧱 1. 选择元素

// 通过 ID
document.getElementById("myId");

// 通过类名（返回 HTMLCollection）
document.getElementsByClassName("myClass");

// 通过标签名（返回 HTMLCollection）
document.getElementsByTagName("div");

// 推荐用法：CSS 选择器（返回单个或 NodeList）
document.querySelector(".box");       // 返回第一个匹配项
document.querySelectorAll(".item");   // 返回所有匹配项

---

🧩 2. 添加 / 修改元素

✅ 创建元素并添加到页面

const newDiv = document.createElement("div");
newDiv.textContent = "Hello DOM!";
newDiv.className = "box";

document.body.appendChild(newDiv); // 添加到 body 的末尾

✅ 修改内容 / 属性

newDiv.innerHTML = "<strong>Bold!</strong>";
newDiv.setAttribute("id", "specialDiv");

✅ 添加样式

newDiv.style.color = "red";

---

🗑️ 3. 删除元素

const box = document.querySelector(".box");
box.remove(); // 直接移除

或者：

box.parentNode.removeChild(box); // 兼容老浏览器

---

🎯 4. 事件绑定

✅ 基本绑定

const btn = document.querySelector("#submitBtn");
btn.addEventListener("click", () => {
  alert("按钮被点击了！");
});

✅ 移除事件监听

function handler() { console.log("Clicked!"); }
btn.addEventListener("click", handler);
btn.removeEventListener("click", handler); // 必须传入同一个函数引用

---

🔗 5. 事件委托

给“父元素”绑定事件，监听“子元素”的行为，提高性能 & 动态元素也有效。

<ul id="list">
  <li>Apple</li>
  <li>Banana</li>
</ul>

document.getElementById("list").addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    alert("你点击了：" + e.target.textContent);
  }
});

---

✍️ 6. 表单处理与校验

<form id="loginForm">
  <input type="text" name="username" required />
  <input type="password" name="password" required />
  <button type="submit">登录</button>
</form>

✅ 获取输入值

const form = document.getElementById("loginForm");

form.addEventListener("submit", (e) => {
  e.preventDefault(); // 阻止刷新

  const username = form.username.value.trim();
  const password = form.password.value.trim();

  if (!username || !password) {
    alert("用户名和密码不能为空！");
    return;
  }

  console.log("登录中...", username, password);
});

---

🧠 实战技巧补充

操作目标	方法
设置 class	el.classList.add("类名")
移除 class	el.classList.remove("类名")
切换 class	el.classList.toggle("类名")
判断 class 是否存在	el.classList.contains("类名")
判断 input 校验	input.validity.valid 或 pattern 属性

属性 / 方法	用途
input.validity.valid	检查输入框当前是否通过所有原生校验规则
pattern="正则"	HTML 中写规则限制，比如手机号、验证码格式等

---

✅ input.validity.valid 是干啥的？

检测某个输入框当前是否有效的布尔值。

🧠 它会自动根据以下条件判断：

• 是否 required 且为空
• 是否符合 type（比如 email, number）
• 是否符合 minlength、maxlength
• 是否符合 pattern（正则）
• 是否符合 min / max 数值范围

✅ 示例：

<input id="email" type="email" required />
<button onclick="check()">提交</button>
<script>
  function check() {
    const input = document.getElementById("email");
    if (!input.validity.valid) {
      alert("请输入有效的邮箱地址！");
    } else {
      alert("验证通过！");
    }
  }
</script>

---

🎯 pattern 属性是干啥的？

以下是常见的 HTML 表单验证中常用的 pattern 正则模板合集，适合前端开发中直接使用，也能作为面试背诵素材：

---

✅ HTML 表单验证常用 pattern 模板合集

🧾 验证内容	pattern 正则表达式	示例备注
手机号（中国）	^1[3-9]\d{9}$	支持 13x~19x 开头共 11 位
电子邮箱	^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$	支持基本邮箱格式
6 位数字验证码	^\d{6}$	限制 6 位纯数字
用户名（字母数字 3~16 位）	^[a-zA-Z0-9]{3,16}$	不允许符号
密码（强度：至少 1 大写+小写+数字，长度 8~20）	^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,20}$	常见复杂密码规则
仅限中文（2~10 字）	^[\u4e00-\u9fa5]{2,10}$	适用于真实姓名等
数字（整数或小数）	^\d+(.\d+)?$	支持整数、小数

🧠 温馨提示

• pattern 只在 type="text", "search", "tel", "url", "email", "password" 等字段生效。
• 建议搭配 required 和 title 使用，提升用户体验。
• 正则越复杂，越推荐加 JS 二次校验。