下面是“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技术站
微信扫一扫 
支付宝扫一扫 