本文通过一个简易留言板案例，详细讲解JavaScript中DOM节点的核心操作。内容涵盖如何获取表单元素值、动态创建li节点、将内容插入列表以及利用父节点关系实现留言删除功能。通过实际代码演示，帮助开发者掌握节点增删改查的关键技巧。
JavaScript DOM节点操作实战：简易留言板开发
本文分享了一个使用JavaScript实现的简易留言板示例代码，供读者参考学习。
本案例的核心重点在于对DOM节点进行实际操作。
主要涉及创建新节点、将节点添加到页面、删除现有节点以及为节点填充内容等基础操作。
实现的功能是一个基础的留言板，支持用户发布新留言以及删除已有留言。
核心交互逻辑：发布与删除事件
核心逻辑包含两个鼠标点击事件：一个是触发发布按钮的点击事件，另一个是触发删除按钮的点击事件。
发布按钮的逻辑如下：首先在文档中创建一个li节点；接着获取文本域中的内容并赋值给该li节点，需注意文本域属于表单元素，应使用value属性获取其值，这与普通元素使用innerHTML获取内容不同；然后将删除链接通过字符串拼接的方式添加到li中；最后将构建好的li节点插入到ul列表中，可以选择追加到末尾或指定位置，此处示例为插入到ul列表的最前端。
删除按钮的逻辑如下：该事件在将创建的li节点添加到ul之后进行定义。删除操作的关键在于明确父节点与子节点的关系，点击删除链接时，实际是删除当前链接所在的li元素，而li正是该删除链接的父节点。
在编写代码前，分析需求比直接敲代码更为重要，应先理清思路再实现功能。
接下来查看运行效果。
初始状态下，页面中没有任何留言内容。
在文本域中输入文字后点击发布按钮，即可成功发布留言；若需移除某条留言，可点击该留言内的删除按钮进行删除。
执行删除操作后的页面状态如下。
代码实现详解
以下是实现该功能的核心JavaScript代码。
<script>
// 点击发布，会把文本域中的内容发布到ul中
// 点击删除，会删除留言
// 1.获取事件源 文本域 按钮 文本域
var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
// 2.注册点击事件
btn.onclick = function () {
// 首先会创建一个li 并把文本域的内容给li 再把li添加到ul中
var li = document.createElement('li');
if (text.value == '') {
alert('您没有输入内容')
} else {
// 文本域的值 value
// 增加一个删除留言的按钮
li.innerHTML = text.value + '<a href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>';
ul.insertBefore(li, ul.children[0]); // 把最新的发布放到最前面
// ul.appendChild(li);
// 3.注册删除点击事件
var removeBtn = document.querySelectorAll('a');
for (var i = 0; i < removeBtn.length; i++) {
removeBtn[i].onclick = function () {
ul.removeChild(this.parentNode);
}
}
}
}
</script>完整的HTML及JS代码示例如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
padding: 100px;
}
textarea {
width: 200px;
height: 100px;
border: 1px solid pink;
outline: none;
resize: none;
}
ul {
margin-top: 50px;
}
li {
width: 300px;
padding: 5px;
background-color: rgb(245, 209, 243);
color: red;
font-size: 14px;
margin: 15px 0;
}
li a {
float: right;
}
</style>
</head>
<body>
<textarea name="" id=""></textarea>
<button>发布</button>
<ul>
</ul>
<script>
// 点击发布，会把文本域中的内容发布到ul中
// 点击删除，会删除留言
// 1.获取事件源 文本域 按钮 文本域
var text = document.querySelector('textarea');
var btn = document.querySelector('button');
var ul = document.querySelector('ul');
// 2.注册点击事件
btn.onclick = function () {
// 首先会创建一个li 并把文本域的内容给li 再把li添加到ul中
var li = document.createElement('li');
if (text.value == '') {
alert('您没有输入内容')
} else {
// 文本域的值 value
// 增加一个删除留言的按钮
li.innerHTML = text.value + '<a href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>';
ul.insertBefore(li, ul.children[0]); // 把最新的发布放到最前面
// ul.appendChild(li);
// 3.注册删除点击事件
var removeBtn = document.querySelectorAll('a');
for (var i = 0; i < removeBtn.length; i++) {
removeBtn[i].onclick = function () {
ul.removeChild(this.parentNode);
}
}
}
}
</script>
</body>
</html>以上内容为本文的全部分享，希望能为读者的学习提供有益帮助，欢迎继续支持本站。