面向初学者的DOM JavaScript实用场景及入门练习项目咨询

一、实用且易上手的DOM应用场景 #

• 表单即时验证：用户填写表单时（比如输入邮箱、设置密码），实时给出反馈（比如密码长度不足时显示红色提示），无需等待提交按钮点击。核心用input/blur事件监听，结合textContent修改提示文本，用classList切换样式。
• 页面内容实时过滤：比如搜索框输入关键词，实时筛选页面上的列表内容（如商品、文章列表），用数组filter方法配合DOM元素的style.display控制显示隐藏。
• 本地存储偏好记忆：记住用户选择的主题、字体大小，刷新页面后保持设置，核心用localStorage存储数据，页面加载时读取并应用到DOM。

二、适合练手的简单DOM项目 #

1. 实时字符计数器 #

功能：为输入框添加实时字符统计，显示已输入字数和限制字数（比如100字上限）
核心DOM操作：

• 监听输入框的input事件
• 通过element.value.length获取输入长度
• 用textContent更新页面上的统计文本
  示例代码：

<input type="text" id="content-input" placeholder="输入内容...">
<p id="count-info"></p>
<script>
const input = document.getElementById('content-input');
const countInfo = document.getElementById('count-info');
const maxLength = 100;

input.addEventListener('input', () => {
  const current = input.value.length;
  countInfo.textContent = `${current}/${maxLength} 字符`;
  // 超过上限时改变提示颜色
  countInfo.style.color = current > maxLength ? 'red' : 'black';
});
</script>

2. 简易待办事项清单 #

功能：添加新待办、标记完成、删除待办项
核心DOM操作：

• 用createElement创建新的待办元素
• 用appendChild将元素添加到列表中
• 事件委托处理动态生成元素的点击事件
• 用classList.toggle切换完成状态的样式
  示例核心代码片段：

const todoInput = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');

addBtn.addEventListener('click', () => {
  const todoText = todoInput.value.trim();
  if (!todoText) return;
  
  const todoItem = document.createElement('li');
  todoItem.innerHTML = `
    <span>${todoText}</span>
    <button class="delete-btn">删除</button>
  `;
  todoList.appendChild(todoItem);
  todoInput.value = '';
  
  // 标记完成
  todoItem.querySelector('span').addEventListener('click', () => {
    todoItem.classList.toggle('completed');
  });
  
  // 删除待办
  todoItem.querySelector('.delete-btn').addEventListener('click', () => {
    todoItem.remove();
  });
});

3. 深色/浅色主题切换 #

功能：点击按钮切换页面主题，可选保存用户偏好
核心DOM操作：

• 用classList.add/remove修改根元素的类名
• 用localStorage存储用户选择的主题，页面加载时自动应用
  示例代码：

<button id="theme-toggle">切换主题</button>
<style>
body { transition: background .3s; }
body.dark { background: #1a1a1a; color: #fff; }
body.light { background: #fff; color: #333; }
</style>
<script>
const toggleBtn = document.getElementById('theme-toggle');
const body = document.body;

// 页面加载时读取本地存储的主题
const savedTheme = localStorage.getItem('theme') || 'light';
body.classList.add(savedTheme);

toggleBtn.addEventListener('click', () => {
  if (body.classList.contains('light')) {
    body.classList.replace('light', 'dark');
    localStorage.setItem('theme', 'dark');
  } else {
    body.classList.replace('dark', 'light');
    localStorage.setItem('theme', 'light');
  }
});
</script>

4. 基础版图片轮播器 #

功能：用左右按钮切换显示一组图片
核心DOM操作：

• 修改img元素的src属性
• 维护图片索引，控制切换逻辑
  示例代码：

<div class="slider">
  <img id="slider-img" src="img1.jpg" alt="轮播图">
  <button id="prev-btn">←</button>
  <button id="next-btn">→</button>
</div>
<script>
const imgElement = document.getElementById('slider-img');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const imgUrls = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
let currentIndex = 0;

prevBtn.addEventListener('click', () => {
  currentIndex = currentIndex === 0 ? imgUrls.length - 1 : currentIndex - 1;
  imgElement.src = imgUrls[currentIndex];
});

nextBtn.addEventListener('click', () => {
  currentIndex = currentIndex === imgUrls.length - 1 ? 0 : currentIndex + 1;
  imgElement.src = imgUrls[currentIndex];
});
</script>

练习小贴士 #

• 先写好HTML结构，再逐步添加JS逻辑，每次只实现一个小功能，测试没问题再往下走
• 多用console.log()查看变量值和事件触发情况，快速排查问题
• 不要一开始就追求复杂样式，先实现核心功能，再慢慢优化UI

内容的提问来源于stack exchange，提问作者ISHA