JavaScript前端实战教程：从DOM操作到交互功能开发

发布时间：2026-04-15 | 分类：JavaScript教程 | 阅读时长：18分钟

👀 阅读：0

前言

本文是面向前端新手的JavaScript实战教程，从基础DOM操作、事件绑定，到实战开发交互功能（点赞、计数器、表单验证），全程使用原生JS实现，无框架依赖。通过本文你将掌握DOM节点获取、事件处理、异步请求、本地存储等核心前端技能，最终实现一个带交互反馈的实战案例。

一、基础准备：了解DOM与JS运行环境

1. DOM基本概念

DOM（文档对象模型）是HTML文档的编程接口，JS通过DOM可以操作页面的元素、属性和样式。所有前端交互功能的本质，都是通过JS修改DOM节点的状态。

2. 开发环境准备

只需浏览器（Chrome/Firefox）+ 编辑器（VS Code）即可开发：

Chrome开发者工具（F12）：用于调试JS代码、查看DOM结构
VS Code插件：JavaScript and TypeScript、Live Server（实时预览）

二、核心基础：DOM节点操作

1. 获取DOM节点

常用的DOM节点获取方法，覆盖80%的开发场景：

// 根据ID获取（唯一节点）
const btn = document.getElementById('demoBtn');

// 根据类名获取（返回数组）
const items = document.getElementsByClassName('item');

// 根据标签名获取（返回数组）
const divs = document.getElementsByTagName('div');

// 根据CSS选择器获取（灵活度最高）
const title = document.querySelector('.article-title'); // 第一个匹配元素
const allBtns = document.querySelectorAll('.nav-btn'); // 所有匹配元素
        

2. 修改节点内容与样式

获取节点后，可修改其内容、属性和样式：

// 修改文本内容
const demoOutput = document.getElementById('demoOutput');
demoOutput.textContent = '新的文本内容';

// 修改HTML内容（支持标签）
demoOutput.innerHTML = '带样式的内容';

// 修改样式（行内样式）
btn.style.backgroundColor = '#0d6efd';
btn.style.padding = '12px 24px';

// 修改类名（推荐方式，解耦样式与逻辑）
btn.classList.add('active'); // 添加类
btn.classList.remove('active'); // 移除类
btn.classList.toggle('active'); // 切换类
        

三、实战第一步：事件绑定与交互反馈

1. 基础事件绑定

为按钮绑定点击事件，实现基础交互：

// 方式1：直接绑定（HTML属性） // function handleClick() { alert('按钮被点击了！'); } // 方式2：JS绑定（推荐，分离HTML与JS） const demoBtn = document.getElementById('demoBtn'); demoBtn.addEventListener('click', function() { const output = document.getElementById('demoOutput'); output.textContent = `点击时间：${new Date().toLocaleTimeString()}`; });

2. 实战演示：点击反馈功能

等待点击...

四、实战第二步：异步请求与数据交互

1. Fetch API发送异步请求

前端与后端交互的核心是异步请求，使用原生Fetch API实现：

// 发送GET请求（获取数据）
fetch('stats.php?action=view&id=article-2')
    .then(response => response.json()) // 解析JSON响应
    .then(data => {
        if (data.code === 0) {
            console.log('请求成功：', data);
        }
    })
    .catch(error => {
        console.error('请求失败：', error);
    });

// 发送POST请求（提交数据）
fetch('stats.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        action: 'like',
        id: 'article-2'
    })
})
.then(res => res.json())
.then(data => console.log(data));
        

2. 本地存储（localStorage）

持久化存储用户操作状态（如是否点赞）：

// 存储数据（键值对，值为字符串）
localStorage.setItem('liked_article-2', 'true');

// 获取数据
const hasLiked = localStorage.getItem('liked_article-2');

// 删除数据
localStorage.removeItem('liked_article-2');

// 清空所有存储
// localStorage.clear();
        

五、实战第三步：完整交互功能开发

整合以上知识点，开发一个带状态记忆的点赞功能：

// 核心逻辑：点赞功能 + 本地存储记忆
const likeBtn = document.getElementById('likeBtn');
let hasLiked = localStorage.getItem('liked_article-2') === 'true';
let likeCount = parseInt(localStorage.getItem('likeCount_article-2')) || 0;

// 初始化状态
if (hasLiked) {
    likeBtn.disabled = true;
    likeBtn.style.opacity = '0.5';
}
document.getElementById('likes').textContent = likeCount;

// 点赞事件
function likeArticle() {
    if (hasLiked) return;
    
    // 更新本地存储
    likeCount++;
    localStorage.setItem('likeCount_article-2', likeCount);
    localStorage.setItem('liked_article-2', 'true');
    
    // 更新UI
    document.getElementById('likes').textContent = likeCount;
    likeBtn.disabled = true;
    likeBtn.style.opacity = '0.5';
    hasLiked = true;
    
    // 异步提交到后端（可选）
    fetch(`stats.php?action=like&id=article-2`)
        .then(res => res.json())
        .then(data => alert(data.msg));
}
        

六、前端开发注意事项

1. 兼容性与性能

事件绑定优先使用addEventListener（兼容所有现代浏览器）
避免频繁操作DOM（可先拼接字符串，再一次性插入）
使用防抖/节流处理高频事件（如resize、scroll）

2. 代码规范

原生JS开发需遵循基础规范：变量命名使用驼峰式、函数功能单一、添加必要注释、避免全局变量污染（使用IIFE/模块化）。

写在最后

本文仅介绍了原生JS的核心交互开发技能，实际前端开发中还会遇到框架（Vue/React）、工程化（Webpack）、跨端开发等复杂场景，后续会逐步更新相关进阶教程。

新手建议先从原生JS交互功能练手，理解前端开发的本质后，再学习框架会事半功倍，同时始终关注用户体验与代码可维护性。