js操作dom节点上移、下移、删除、添加操作

最新推荐文章于 2024-12-16 17:03:05 发布

AzeShinja

最新推荐文章于 2024-12-16 17:03:05 发布

阅读量2.4k

点赞数 1

分类专栏： Js基础知识文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/AzeShinja/article/details/121278485

版权

Js基础知识专栏收录该内容

42 篇文章

订阅专栏

在这里插入图片描述
需求如图：需要上移节点，下移节点，删除节点，和添加项目

需要原生的操作dom

编译器: HBuilder

有朋友刚学js让我帮他写一下，正好借着这个机会用一下新的编译器HB，感觉还不错

那我直接上代码吧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表的增删和移动</title>
		<style>
			body {
				background: #ddd;
				text-align: center
			}

			.list {
				display: inline-block;
				margin-top: 20px;
				padding: 40px;
				border-radius: 8px;
				background: #fff;
				color: #333;
				text-align: left;
				font-size: 13px
			}

			.list-ul {
				list-style: none;
				margin: 0;
				padding: 0
			}

			.list-option {
				padding: 6px 0;
			}

			.list-input {
				width: 300px;
				border: 1px solid #ccc;
				padding: 4px;
				font-size: 14px;
				color: #333
			}

			.list-input:hover {
				background: #effaff
			}

			.list-btn span {
				color: #0065A0;
				;
				cursor: pointer
			}

			.list-btn span:hover {
				text-decoration: underline
			}

			.list-btn b {
				text-align: center;
				background-color: #D6EDFF;
				border-radius: 6px;
				width: 20px;
				height: 20px;
				display: inline-block;
				margin: 0 2px;
				cursor: pointer;
				color: #238FCE;
				border: 1px solid #B3DBF8;
				float: left
			}

			.list-bottom {
				margin-top: 5px
			}

			.list-add-show {
				color: #f60;
				cursor: pointer
			}

			.list-add-show:before {
				position: relative;
				top: 1px;
				margin-right: 5px;
				content: "+";
				font-weight: 700;
				font-size: 16px;
				font-family: arial
			}

			.list-add-show span:hover {
				text-decoration: underline
			}

			.list-add-area {
				margin-top: 5px
			}

			.list-add-add {
				cursor: pointer;
				margin-left: 5px
			}

			.list-add-cancel {
				cursor: pointer;
				margin-left: 4px
			}

			.list-add-input {
				width: 180px;
				border: 1px solid #ccc;
				padding: 4px;
				font-size: 14px;
				color: #333
			}

			.list-add-input:hover {
				background: #effaff
			}
		</style>
	</head>
	<body>
		<form>
			<div class="list">
				<ul class="list-ul">
					<li class="list-option">
						<input class="list-input" type="text" name="list">
						<span class="list-btn">
							<span class="list-up">[上移]</span>
							<span class="list-down">[下移]</span>
							<span class="list-del" id="delProject">[删除]</span>
						</span>
					</li>
				</ul>
				<div class="list-bottom">
					<span class="list-add-show" id="addProject"><span>添加项目</span></span>
					<div class="list-add-area list-hide">
						添加到列表：
						<input class="list-add-input" type="text" name="list">
						<input class="list-add-add" type="button" id="addThisProject" value="添加">
						<input class="list-add-cancel" type="button" id="resetThisProject" value="取消">
					</div>
				</div>
			</div>
		</form>
		<script type="text/javascript">
			var form = document.getElementsByClassName('list-ul')[0];
			var delProject = document.getElementById('delProject');
			var newTr = form.firstElementChild.cloneNode(true);
			var addProject = document.getElementById('addProject');
			var addThisProject = document.getElementById('addThisProject');
			var resetThisProject = document.getElementById('resetThisProject');
			var listAddInput = document.getElementsByClassName('list-add-input')[0];
			form.onclick = function(event) {
				console.log(event.target)
				var target = event.target;
				console.log(form);
				if (target.className === 'list-del') {
					form.removeChild(target.parentNode.parentNode);
				}
				if (target.className === 'list-up') {
					var nowLi = target.parentNode.parentNode;
					var prevLi = previousNode(nowLi);
					console.log('当前LI', prevLi)
					if (!prevLi) {
						alert('到头了');
					} else {
						form.insertBefore(nowLi, prevLi);
					}
				}
				if (target.className === 'list-down') {
					var nowLi = target.parentNode.parentNode;
					var nextLi = nextNode(nowLi);
					if (!nextLi) {
						alert('到尾了');
					} else {
						form.insertBefore(nextLi, nowLi);
					}

				}
			}
			addProject.onclick = function(event) {
				if (form.firstElementChild) {
					newTr = form.firstElementChild.cloneNode(true);
				}
				form.appendChild(newTr);
			}
			addThisProject.onclick = function(event) {
				var inputVal = listAddInput.value;
				if (form.firstElementChild) {
					newTr = form.firstElementChild.cloneNode(true);
				}
				console.log(newTr.childNodes[1].value)
				newTr.childNodes[1].value = inputVal;
				form.appendChild(newTr);
			}
			resetThisProject.onclick = function(event) {
				listAddInput.value = '';
			}

			function firstNode(obj) {
				if (!obj.firstChild) {
					return false;
				}
				return obj.firstElementChild || (obj.firstChild.nodeType == 1 ? obj.firstChild : nextNode(obj.firstChild));
			}

			function lastNode(obj) {
				if (!obj.lastChild) {
					return false;
				}
				return obj.lastElementChild || (obj.lastChild.nodeType == 1 ? obj.lastChild : previousNode(obj.lastChild));
			}

			function nextNode(obj) {
				if (!obj.nextSibling) {
					return false;
				}
				return obj.nextElementSibling || (obj.nextSibling.nodeType == 1 ? obj.nextSibling : nextNode(obj.nextSibling));
			}

			function previousNode(obj) {
				if (!obj.previousSibling) {
					return false;
				}
				return obj.previousElementSibling || (obj.previousSibling.nodeType == 1 ? obj.previousSibling : previousNode(obj
					.previousSibling));
			}
		</script>
	</body>
</html>

效果图：
在这里插入图片描述