在本文中，我们将探讨如何使用JavaScript（JS）实现一个简单的留言板特效。这个特效包括用户输入评论、显示评论列表以及提供删除评论的功能。以下是一些关键知识点和代码分析：
1. **textarea**: `textarea` 是HTML中的一个元素，用于创建大段文本输入框，用户可以在其中输入多行文本。在本例中，`<textarea>` 元素用于让用户输入他们的评论内容。
```html
<textarea name="my_textarea" id="my_textarea" cols="30" rows="10"></textarea>
```
2. **value 属性**: `value` 属性用于获取或设置 `textarea`、`input` 等表单元素的值。在本例中，我们通过 `my_textarea.value` 获取用户输入的评论内容。
```javascript
var content = my_textarea.value;
```
3. **innerHTML 属性**: `innerHTML` 用于获取或设置元素的 HTML 内容。在这里，我们使用它来创建新的 `li` 元素，并将评论内容和删除链接插入到 `li` 的 `innerHTML` 中。
```javascript
li.innerHTML = content + '<a href="javascript:;" rel="external nofollow" >删除</a>';
```
4. **innerText 属性**: 虽然在本例中未直接使用，但 `innerText` 与 `innerHTML` 类似，但仅用于获取或设置元素的纯文本内容，不包含HTML标记。
5. **insertBefore() 方法**: 这个方法用于在指定的子节点之前插入一个新的子节点。在我们的例子中，我们使用它将新创建的 `li` 元素插入到 `ul` 的第一个子节点之前，使得新评论总是出现在列表顶部。
```javascript
ul.insertBefore(li, ul.children[0]);
```
6. **事件监听器 (Event Listeners)**: 使用 `addEventListener` 方法，我们可以为特定的DOM元素添加事件处理程序。在本例中，我们为按钮添加点击事件监听器，当用户点击“发表”按钮时执行相应的函数。
```javascript
$('btn').addEventListener('click', function (ev1) { ... });
```
7. **删除评论功能**: 通过为每个评论的删除链接添加点击事件监听器，我们可以实现删除评论的功能。当用户点击删除链接时，该链接的父节点（即包含评论的 `li` 元素）会被移除。
```javascript
r.addEventListener('click', function (evt) {
this.parentNode.remove();
});
```
8. **自定义函数 `$`**: 这是一个辅助函数，接受一个ID字符串作为参数，返回对应的DOM元素。这类似于jQuery库中的 `$` 函数，简化了获取元素的过程。
```javascript
function $(id) {
return typeof id === 'string' ? document.getElementById(id) : null;
}
```
通过这些知识点，我们可以创建一个基本的留言板系统，允许用户输入评论，显示评论列表，并提供删除评论的选项。这只是一个基础实现，实际应用中可能需要考虑更多的功能，如数据持久化、用户验证、错误处理等。希望这个简化的示例能帮助你理解JavaScript在构建动态网页中的基本应用。
- 1
- 2
前往页