JavaScript DOM实现简单留言板

下面是“JavaScript DOM实现简单留言板”的完整攻略。

一、准备工作

1.1 创建HTML文件

首先，我们要创建一个HTML文件，命名为“index.html”。在这个文件里编写HTML结构，用于显示留言板的相关内容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript DOM实现简单留言板</title>
</head>
<body>
    <h1>JavaScript DOM实现简单留言板</h1>
    <form>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username"><br>

        <label for="message">留言：</label>
        <textarea id="message" name="message"></textarea><br>

        <button type="button" id="submit">提交留言</button>
    </form>

    <ul id="message-list"></ul>

    <script src="app.js"></script>
</body>
</html>

1.2 创建JavaScript文件

接着，我们要创建一个JavaScript文件，命名为“app.js”。在这个文件里编写JavaScript代码，实现留言板的相关功能。

// 获取元素
const form = document.querySelector('form');
const username = document.querySelector('#username');
const message = document.querySelector('#message');
const messageList = document.querySelector('#message-list');

// 提交留言
form.addEventListener('submit', (event) => {
  event.preventDefault();

  const li = document.createElement('li');
  const strong = document.createElement('strong');
  const span = document.createElement('span');

  strong.textContent = username.value;
  span.textContent = message.value;

  li.appendChild(strong);
  li.appendChild(span);
  messageList.appendChild(li);

  username.value = '';
  message.value = '';
});

二、攻略解析

2.1 获取元素

const form = document.querySelector('form');
const username = document.querySelector('#username');
const message = document.querySelector('#message');
const messageList = document.querySelector('#message-list');

在获取元素时，我们使用了document.querySelector()方法。这个方法接收一个选择器字符串作为参数，并返回满足该选择器的第一个元素。在这个留言板项目中，我们使用了四个不同的选择器：

'form'选择器：用于获取表单元素；
'#username'选择器：用于获取用户名输入框元素；
'#message'选择器：用于获取留言输入框元素；
'#message-list'选择器：用于获取留言列表元素。

2.2 提交留言

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const li = document.createElement('li');
  const strong = document.createElement('strong');
  const span = document.createElement('span');

  strong.textContent = username.value;
  span.textContent = message.value;

  li.appendChild(strong);
  li.appendChild(span);
  messageList.appendChild(li);

  username.value = '';
  message.value = '';
});

在提交留言时，我们使用了form.addEventListener()方法。这个方法接收两个参数：事件名称和事件处理函数。

在事件处理函数中，我们使用了以下几个方法：

event.preventDefault()方法：阻止表单的默认提交行为；
document.createElement()方法：创建新的HTML元素；
textContent属性：用于设置元素的文本内容；
appendChild()方法：将某个元素追加到另一个元素的子节点列表的末尾；
值为''的属性：通过将某个属性的值设置为空字符串来清空表单输入框。

在这个过程中，我们首先创建了一个新的<li>元素，并创建了两个子元素<strong>和<span>，分别用于显示用户名和留言内容。然后将这两个子元素都添加到<li>元素中，并将<li>元素添加到留言列表中。最后，清空了表单输入框的值，以达到重置表单的目的。

2.3 示例说明

下面，我们给两个示例，来演示如何添加更多的功能。

示例1：限制留言字数

我们可以在代码中添加一个函数来限制留言的字数。比如，我们可以设置留言的最大字数为50。如果用户输入的留言字数超过了50个字符，我们就给出一个警告提示。代码修改如下：

// 获取元素
const form = document.querySelector('form');
const username = document.querySelector('#username');
const message = document.querySelector('#message');
const messageList = document.querySelector('#message-list');

// 提交留言
form.addEventListener('submit', (event) => {
  event.preventDefault();

  // 限制留言字数
  if (message.value.length > 50) {
    alert('留言字数不能超过50个字符！');
    return;
  }

  const li = document.createElement('li');
  const strong = document.createElement('strong');
  const span = document.createElement('span');

  strong.textContent = username.value;
  span.textContent = message.value;

  li.appendChild(strong);
  li.appendChild(span);
  messageList.appendChild(li);

  username.value = '';
  message.value = '';
});

在这个代码中，我们添加了一个判断语句，用于限制留言字数。如果留言字数超出了50个字符，就弹出一个警告提示。

示例2：删除留言

我们也可以添加一个功能，允许用户删除自己的留言。具体实现方法是，在每个留言的后面添加一个“删除”按钮，当用户点击这个按钮时，就从留言列表中删除该留言。代码修改如下：

// 获取元素
const form = document.querySelector('form');
const username = document.querySelector('#username');
const message = document.querySelector('#message');
const messageList = document.querySelector('#message-list');

// 提交留言
form.addEventListener('submit', (event) => {
  event.preventDefault();

  const li = document.createElement('li');
  const strong = document.createElement('strong');
  const span = document.createElement('span');
  const button = document.createElement('button');

  strong.textContent = username.value;
  span.textContent = message.value;
  button.textContent = '删除';

  li.appendChild(strong);
  li.appendChild(span);
  li.appendChild(button);
  messageList.appendChild(li);

  button.addEventListener('click', () => {
    messageList.removeChild(li);
  });

  username.value = '';
  message.value = '';
});

在这个代码中，我们添加了一个新的<button>元素，用于删除留言。当用户点击这个按钮时，我们就可以从留言列表中删除该留言。为了实现这个功能，我们在添加留言时，给每个留言都添加了一个“删除”按钮，并为这个按钮添加了一个click事件处理函数。在这个事件处理函数中，我们使用messageList.removeChild()方法，将当前的留言元素从留言列表中删除。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript DOM实现简单留言板 - Python技术站