实现节点的添加、选中删除、根据内容删除、模糊查询删除、添加样式

最新推荐文章于 2023-12-06 10:48:55 发布

怪我太贪心

最新推荐文章于 2023-12-06 10:48:55 发布

阅读量222

点赞数

本文链接：https://blog.csdn.net/qq_45580938/article/details/100517024

版权

在这里插入图片描述


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			/*封装函数*/
			function $(id){
				return document.getElementById(id);
			}
			window.onload=function(){
				//获取标签对象
				var omovieList = $("movieList");
				var oaddbtn = $("addbtn");
				var otxt = $("txt");
				var odelbtn = $("delbtn");
				var ocontent = $("content");
				var ocontentDel = $("contentDel");
				var osetStyle = $("setStyle");
				var obtnStyle = $("btnStyle");
				var ocontentLike = $("contentLike");
				var ocontentLikeDel = $("contentLikeDel");
				
				//1.old变量里面保存的就是要删除的节点
				var old = null;
				
				//2.给电影列表所有的li标签添加点击事件
				var olis = omovieList.children;
				//console.log(olis);
				//循环遍历添加点击事件
				for (var i = 0; i < olis.length; i++) {
					olis[i].onclick=function(){
						//把当前的Li标签对象，给old变量赋值
						old = this;
					}
				}
				
				//绑定事件
				//添加节点
				oaddbtn.onclick=function(){
					if(otxt.value==''){
						alert("请输入电影名称！");
						return;
					}
					//创建一个标签,返回标签对象
					var oli = document.createElement("li");
					//给标签添加内容
					oli.innerHTML = otxt.value;
					//给标签找个爹
					//把子节点(li)添加到父节点(ul)上
					omovieList.appendChild(oli);
					//添加完成，清空文本框
					otxt.value = '';
					//3.给新增的节点添加绑定事件
					oli.onclick=function(){
						old = this;
					}
				}
				//选中删除节点
				odelbtn.onclick=function(){
					if(old==null){
						alert("请选择一个电影删除！");
						return;
					}
					//删除节点
					omovieList.removeChild(old);
					//把old变量清空
					old=null;
				}
				//根据内容删除
				ocontentDel.onclick=function(){
					var flag = false;//标记
					if(ocontent.value==''){
						alert("请填写删除内容！");
						return;
					}
					//循环电影的li列表
					for (var i = 0; i < olis.length; i++) {
						//如果比对成功，删除节点
						if(olis[i].innerHTML == ocontent.value){
							omovieList.removeChild(olis[i]);
							flag = true;
						}
					}
					if(!flag){
						alert("删除内容不匹配，不能删除！");
						return;
					}
					//把文本框的内容清空
					ocontent.value = '';
				}
				//添加样式
				obtnStyle.onclick=function(){
					if(osetStyle.value==''){
						alert("请填写样式！");
						return;
					}
					//给li设置样式
					old.style = osetStyle.value;
					//清空old变量
					old = null;
				}
				//根据内容模糊删除
				ocontentLikeDel.onclick=function(){
					var flag = false;//标记
					if(ocontentLike.value==''){
						alert("请填写删除内容！");
						return;
					}
					//循环遍历
					//使用倒序输出！！！
					for (var i = olis.length-1; i >= 0; i--) {
						var str = olis[i].innerHTML;
						//indexOf:表示子字符串在字符串中首次出现的位置
						//如果没找到，返回-1，如果找到了，返回一个整数
						if(str.indexOf(ocontentLike.value)>-1){
							omovieList.removeChild(olis[i]);
							flag = true;
						}
					}
					if(!flag){
						alert("要删除的内容不存在！");
						return;
					}
					ocontentLike.value="";
				}
			}
		</script>
	</head>
	<body>
		<ul id="movieList">
			<li>英雄本色</li>
			<li>创世纪</li>
			<li>刑事侦缉档案1</li>
			<li>刑事侦缉档案2</li>
			<li>刑事侦缉档案3</li>
		</ul>
		<br />
		<input type="text" name="" id="txt" />
		<input type="button" value="添加节点" id="addbtn"/>
		<input type="button" value="选中删除节点" id="delbtn"/>
		<p>
			<input type="text" name="" id="content" />
			<input type="button" value="根据内容删除" id="contentDel"/>
		</p>
		<p>
			<input type="text" name="" id="contentLike" />
			<input type="button" value="根据内容模糊删除" id="contentLikeDel"/>
		</p>
		<p>
			<input type="text" name="" id="setStyle" />
			<input type="button" value="添加样式" id="btnStyle"/>
		</p>
	</body>
</html>

怪我太贪心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现节点的添加、选中删除、根据内容删除、模糊查询删除、添加样式

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> /*封装函数*/ function $(id){ return document.getElementById(id);...
复制链接

扫一扫