js节点操作和留言板功能（9）-CSDN博客

1.js节点操作

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.box{
		color: red;
	}
</style>
<body>
<ul>
	<li class="box" id="li1">
		<span>第一项</span>
	</li>
	<li class="box">
		<span>第二项</span>
	</li>
	<li class="box">
		<span>第三项</span>
	</li>
</ul>
<button>增加</button>
<button>克隆</button>
<button>删除第一个li</button>
<script>
	var bt1=document.getElementsByTagName("button")[0];
	var bt2=document.getElementsByTagName("button")[1];
	var bt3=document.getElementsByTagName("button")[2];
	var nav=document.getElementsByTagName("ul")[0];
	bt1.onclick=function(){
		//js动态创建标签节点
	//在js中动态创建一个li标签，<li></li>
		var x=document.createElement("li");
		//向态创建的元素中添加内容
		x.innerHTML="第四项";//<li>第四项</li>
		x.className="box";//给动态的元素添加类名
		nav.appendChild(x);//将动态创建的li，插入到ul的最后
	}
		
	bt2.onclick=function(){
		var li1=document.getElementById("li1");
//克隆，通过是否传入true控制，是否需要复制里边的内容，如果没有true，内容不复制，如果有true，内容复制
		var creatLi=li1.cloneNode(true);
		nav.appendChild(creatLi);
	}
//需求：点击对应的li时，让其父级的背景色变成蓝色
	var navLis=document.getElementsByTagName("li");
	for(var n=0;n<navLis.length;n++){
		navLis[n].onclick=function(){
		//parentNode 找到对应元素的父级元素
			this.parentNode.style.backgroundColor="blue";
		}
	}
//需求：删除第一个li，
	bt3.onclick=function(){
		//找到被删除的元素
		var firstLi=document.getElementsByTagName("li")[0];
		//找到被删除元素的父级
		var nav=document.getElementsByTagName("ul")[0];
		//将这个元素在其父级中删除
		nav.removeChild(firstLi);
	}
	//需求：点击li自己本身时，自身被删掉
		for(var n=0;n<navLis.length;n++){
			navLis.onclick=function(){//this就是当前对象
				var par=this.parentNode;//this.parentNode就是当前对象的父级
				par.removeChild(this);
			}
		}
</script>
</body>
复制代码

要点：

1. js动态创建标签节点 createElement("")

例如：在js中动态创建一个li标签，<li></li>

var x=document.createElement("li");
复制代码

nav.appendChild(x)将动态创建的标签x，插入到ul(nav[0])的最后

克隆，通过是否传入参数true控制，是否需要复制里边的内容，如果没有true，内容不复制，如果有true，内容复制

var creatLi=li1.cloneNode(true);
nav.appendChild(creatLi);
复制代码

2. 删除指定的元素（删除节点）

（1）找到被删除的元素；

（2）找到被删除的元素的父级；

（3）将这个元素在父级中被删除父级.removeChild(对应的节点)

3. 点击li自己本身时，自身被删掉par.removeChild(this)

for(var n=0;n<navLis.length;n++){
	navLis.onclick=function(){//this就是当前对象
	    var par=this.parentNode;//this.parentNode就是当前对象的父级
	    par.removeChild(this);
	}
}
复制代码

2.留言板功能的实现

<style>
	*{
		padding: 0;
		margin: 0;
	}
.box{
	width: 300px;
	height: 300px;
	}
	td{
		width: 100px;
		text-align: center;
	}
	input{
		display: block;
		margin-bottom: 10px;
	}
</style>
<body>
<div class="box">
	<table border="1" cellspacing="0">
		<tr>
			<td>姓名</td>
			<td>内容</td>
			<td>删除</td>
		</tr>
		<tr>
			<td>宋顶飞</td>
			<td>今天天气不错</td>
			<td><button onclick="remove(this)">删除</button></td>
		</tr>                     <!--  这里的this为形式参数，点击时指向button， -->
		</table>
	姓名：<input type="text" id="bt2">
	内容：<textarea name="" id="bt3" cols="30" rows="10"></textarea>
	<button id="bt1">发表</button>
</div>
	<script>
//需求：当点击发表时，获取到输入的姓名，内容，然后插入到table
		var bt1=document.getElementById("bt1");
		bt1.onclick=function(){
			var bt2=document.getElementById("bt2");
			var bt3=document.getElementById("bt3");
			var uname=bt2.value;//获取到姓名
			var content=bt3.value;//获取到内容
			var CreatTr=document.createElement("tr");//创建一对tr标签 <tr></tr>
			var CreatTd1=document.createElement("td");//创建第一个td标签
			CreatTd1.innerHTML=uname;//让新创建出的第一个td中的内容等于输入的姓名
			CreatTr.appendChild(CreatTd1);
			var CreatTd2=document.createElement("td");//创建第二个td标签
			CreatTd2.innerHTML=content;//让新创建出的第二个td中的内容等于输入的内容
			CreatTr.appendChild(CreatTd2);
			var CreatTd3=document.createElement("td");//创建第三个td标签
			CreatTd3.innerHTML="<button onclick='remove(this)'>删除</button>";
			//让新创建出的第三个td中的内容等于<button>删除</button>
			CreatTr.appendChild(CreatTd3);
			var table=document.getElementsByTagName("table")[0];
			table.appendChild(CreatTr);
			bt2.value="";
			bt3.value="";
		}
		function remove(dom){//函数是另外定义的，this指向最大的对象window，
			var par=dom.parentNode.parentNode;//找到要被删除的元素
			var table=par.parentNode;//找到要被删除的元素的父级
			table.removeChild(par);//在父级中删除指定元素
		}
	</script>
</body>
</html>
复制代码