JavaScript DOM 实战：动手操作网页元素

一、选项卡切换

<button class="tab-btn active" onclick="openTab(0)">Tab 1</button>
<button class="tab-btn" onclick="openTab(1)">Tab 2</button>
<div class="tab-content show">内容 1</div>
<div class="tab-content">内容 2</div>
<script>
function openTab(index) {
  const btns = document.querySelectorAll(".tab-btn");
  const contents = document.querySelectorAll(".tab-content");
  btns.forEach(b => b.classList.remove("active"));
  contents.forEach(c => c.classList.remove("show"));
  btns[index].classList.add("active");
  contents[index].classList.add("show");
}
</script>

二、模态框（弹窗）

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeModal()">x</span>
    <p>这是一个模态框！</p>
  </div>
</div>

<script>
function openModal() { document.getElementById("myModal").classList.add("show"); }
function closeModal() { document.getElementById("myModal").classList.remove("show"); }
</script>

三、表单实时验证

emailInput.addEventListener("input", function() {
  if (!this.value.includes("@")) {
    emailMsg.textContent = "邮箱格式不对";
    emailInput.style.borderColor = "red";
  } else {
    emailMsg.textContent = "";
    emailInput.style.borderColor = "green";
  }
});

四、动态列表

let todos = [];
function addTodo() {
  const text = document.getElementById("todoInput").value.trim();
  if (!text) return;
  todos.push(text);
  render();
}
function render() {
  const ul = document.getElementById("todoList");
  ul.innerHTML = todos.map((t, i) =>
    <li>${t} <button onclick="removeTodo(${i})">删除</button></li>
  ).join("");
}

五、懒加载图片

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
document.querySelectorAll("img.lazy").forEach(img => observer.observe(img));

六、图片轮播

let current = 0;
const slides = document.querySelectorAll(".slide");
function showSlide(index) {
  slides.forEach((s, i) => s.classList.toggle("active", i === index));
}
function nextSlide() {
  current = (current + 1) % slides.length;
  showSlide(current);
}
setInterval(nextSlide, 3000);