副队长JavaScript教程(58)-基于DOM的网页留言板开发

点此查看 所有教程、项目、源码导航

文章目录

• [1. 前言](#1. 前言)
• [2. 案例功能说明](#2. 案例功能说明)
• [3. 分步开发讲解](#3. 分步开发讲解)
• • [3.1 搭建 HTML 基础结构](#3.1 搭建 HTML 基础结构)
  • [3.2 添加 CSS 美化样式](#3.2 添加 CSS 美化样式)
  • [3.3 JS 第一步：获取页面元素](#3.3 JS 第一步：获取页面元素)
  • [3.4 编写 addMsg 提交函数：取值 + 非空判断](#3.4 编写 addMsg 提交函数：取值 + 非空判断)
  • [3.5 动态创建留言节点](#3.5 动态创建留言节点)
  • [3.6 给删除按钮绑定点击事件](#3.6 给删除按钮绑定点击事件)
  • [3.7 拼装节点、追加到页面、清空输入框](#3.7 拼装节点、追加到页面、清空输入框)
• [4. 完整可直接运行代码](#4. 完整可直接运行代码)
• [5. 拓展思考（可以自己尝试改造）](#5. 拓展思考（可以自己尝试改造）)
• [6. 小结](#6. 小结)

1. 前言

前面我们依次学习了 DOM 元素获取、修改内容样式、节点增删、表单操作、事件、事件冒泡等知识点。

单纯分开学习知识点比较零散，本篇我们做一个综合案例：简易留言板。

用到的知识点：

• 获取 DOM 元素
• 表单取值、表单非空验证
• 创建节点、追加节点、删除节点
• 点击事件
• 样式修改

需要注意的是，我们还没有学习本地存储，留言无法保存在浏览器里面；同时也还没接触网络通信，不能调用后端接口把数据存到服务器。所以这个留言板只是临时效果，页面刷新之后，所有留言就会消失，不具备持久保存的能力。后面学到对应的知识点，我们再继续完善这个项目。

2. 案例功能说明

简易留言板，实现下面这些功能：

1. 在输入框填写留言内容，点击提交按钮，新增一条留言
2. 非空校验：不能提交空留言、不能只输入空格
3. 每条留言自带删除按钮，点击可以删掉这条留言
4. 留言自动追加到留言列表最下方

3. 分步开发讲解

3.1 搭建 HTML 基础结构

先把页面骨架写出来，包含多行文本输入框、提交按钮、用来存放留言的容器。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简易留言板</title>
</head>
<body>
    <div class="box">
        <h3>留言板</h3>
        <textarea id="msgInput" placeholder="请输入留言"></textarea>
        <br>
        <button onclick="addMsg()">提交留言</button>
        <div id="msgList"></div>
    </div>
</body>
</html>

此时效果如下：

重点说明：

• textarea 用来输入多行留言；
• msgList 是留言容器，后面 JS 动态生成的留言都放到这里；
• 按钮使用行内 onclick 绑定点击事件，点击后执行 addMsg() 函数。

3.2 添加 CSS 美化样式

增加样式，延续我们之前淡蓝色主题，排版整齐好看。

<style>
    .box {
        width: 500px;
        margin: 30px auto;
    }
    textarea {
        width: 100%;
        height: 100px;
        padding: 10px;
        box-sizing: border-box;
    }
    button {
        margin-top: 10px;
        padding: 6px 16px;
        cursor: pointer;
    }
    .msg-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        margin: 10px 0;
        background-color: #e6f4ff;
        border-radius: 6px;
    }
    .del-btn {
        background-color: #f56c6c;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 3px 8px;
    }
</style>

此时效果如下：

重点说明：

• box-sizing: border-box 让宽高包含内边距，不会撑大盒子；
• .msg-item 是每一条留言的样式；
• .del-btn 专门给删除按钮设置红色样式。

3.3 JS 第一步：获取页面元素

我们先拿到输入框和留言列表容器，后面反复使用。

var msgInput = document.querySelector("#msgInput");
var msgList = document.querySelector("#msgList");

重点说明：

document.querySelector 根据选择器拿到 DOM 对象，保存到变量，避免重复查找元素。

3.4 编写 addMsg 提交函数：取值 + 非空判断

function addMsg() {
    // 获取输入内容，去除首尾空格
    var content = msgInput.value.trim();
    // 非空验证
    if (content === "") {
        alert("留言内容不能为空！");
        return;
    }
}

此时如果直接提交：

重点说明：

如果内容为空，alert 提示，然后 return 直接结束函数，后面代码不再执行。

3.5 动态创建留言节点

校验通过之后，开始创建留言条目、文字、删除按钮。

// 创建一条留言外层容器
var msgItem = document.createElement("div");
msgItem.className = "msg-item";

// 创建文本span，存放留言文字
var contentSpan = document.createElement("span");
contentSpan.innerText = content;

// 创建删除按钮
var delBtn = document.createElement("button");
delBtn.className = "del-btn";
delBtn.innerText = "删除";

重点说明：

document.createElement("标签名") 在内存里创建元素，此时还没有放到页面上。

3.6 给删除按钮绑定点击事件

点击删除按钮，删掉当前这条留言。

delBtn.onclick = function () {
    // this：当前点击的删除按钮
    // parentElement：获取父元素，也就是整条留言
    this.parentElement.remove();
}

重点说明：

remove() 方法直接把节点从页面移除。

3.7 拼装节点、追加到页面、清空输入框

// 把文字和按钮放进留言容器
msgItem.appendChild(contentSpan);
msgItem.appendChild(delBtn);
// 把留言条目放到留言列表中
msgList.appendChild(msgItem);
// 提交完成清空输入框，方便下一次输入
msgInput.value = "";

重点说明：

appendChild 是父子追加，先组装内部结构，再整体放入列表。

此时如果输入留言："太棒了"，点击提交留言后：

4. 完整可直接运行代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简易留言板</title>
    <style>
        .box {
            width: 500px;
            margin: 30px auto;
        }
        textarea {
            width: 100%;
            height: 100px;
            padding: 10px;
            box-sizing: border-box;
        }
        button {
            margin-top: 10px;
            padding: 6px 16px;
            cursor: pointer;
        }
        .msg-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            margin: 10px 0;
            background-color: #e6f4ff;
            border-radius: 6px;
        }
        .del-btn {
            background-color: #f56c6c;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 3px 8px;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>留言板</h3>
        <textarea id="msgInput" placeholder="请输入留言"></textarea>
        <br>
        <button onclick="addMsg()">提交留言</button>
        <div id="msgList"></div>
    </div>

    <script>
        // 获取元素
        var msgInput = document.querySelector("#msgInput");
        var msgList = document.querySelector("#msgList");

        // 添加留言函数
        function addMsg() {
            // 获取输入内容，去除首尾空格
            var content = msgInput.value.trim();
            // 非空验证
            if (content === "") {
                alert("留言内容不能为空！");
                return;
            }

            // 创建一条留言外层容器
            var msgItem = document.createElement("div");
            msgItem.className = "msg-item";

            // 创建文本节点包裹留言内容
            var contentSpan = document.createElement("span");
            contentSpan.innerText = content;

            // 创建删除按钮
            var delBtn = document.createElement("button");
            delBtn.className = "del-btn";
            delBtn.innerText = "删除";

            // 删除按钮点击事件
            delBtn.onclick = function () {
                // this 是删除按钮，this.parentElement 就是这条留言
                this.parentElement.remove();
            }

            // 拼装结构
            msgItem.appendChild(contentSpan);
            msgItem.appendChild(delBtn);
            // 追加到留言列表
            msgList.appendChild(msgItem);

            // 提交完成清空输入框
            msgInput.value = "";
        }
    </script>
</body>
</html>

5. 拓展思考（可以自己尝试改造）

1. 增加留言时间，新增留言时带上当前时间
2. 增加留言长度限制，最多 50 个字
3. 给留言增加鼠标移入变色效果

6. 小结

1. 综合用到：元素获取、表单取值、trim() 校验、节点创建与删除；
2. 事件：onclick 点击事件；
3. this 在事件函数里代表绑定事件的元素；
4. parentElement 可以拿到父节点，remove() 实现节点删除。