JS对DOM节点的操作--增加节点，删除节点

（1）：DOM ：DOM文档树的全称是document object model ,也就是文档对象模型，在js中，把整页面当成一个dom树，而我们可以对每一个节点都可以进行相应的操作，比如创建一个节点，删除一个节点等等。

对于操作的方法；这里我将展示一个小的demo.

先看下效果图：当点击添加的时候，在父div里创建新的div节点，并且生成随机颜色，当点击删除的时候，删除当前的div节点，也就是从父div里移除当前的div节点。

（1-1）：先搭建大体的页面框架，看下面的html代码

<span style="font-size:18px;"><div id="div">
	<div id="addDiv">
		<button id="add">添加</button>
	</div>
</div></span>

（1-2）：给页面样式，css代码如下

<span style="font-size:18px;"><style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#div{
			border: 1px solid red;
			width: 400px;
			height: 50px;
		}
		#addDiv{
			border: 1px solid red;
			width: 400px;
			height: 50px;
		}
		#add{
			width: 50px;
			height: 50px;
			background: blue;
			float: right;
		}
	</style></span>

（1-3）：完成了上面的几部，下面的js才是最为关键的，首先，分析下大体的思想，当鼠标点击添加时，在父盒子里面创建新的div，用的是createElement()方法，并添加到父盒子里面，用的是appendChiled()方法，生成的随机颜色也可以不用我这里的放法，或用一个数组来装1-9，a-f,然后随机获取到数组中的6位，再在前面添加"#",创建好当前div的同时，我们也要给当前的div创建一个删除按钮，当点击删除时，删除当前的div,也就是把当前的div从父盒子里面移除，用的是removeChild()方法。

<span style="white-space:pre">	</span><span style="font-size:18px;"><script type="text/javascript">
		/*
			当点击添加的时候，创建div

		*/
		window.onload = function(){
			var strAdd = document.getElementById("add");
			var box = document.getElementById("div");
			strAdd.onclick =addDiv;
			//1：创建盒子节点
			function addDiv(){
				var newDiv = document.createElement("div");
				newDiv.style.height = "50px";
				newDiv.style.backgroundColor = rondomColor();
				box.appendChild(newDiv);

				//2：创建删除按钮
				var delBtn = document.createElement("button");
				delBtn.innerHTML = "删除";
				delBtn.style.width = "50px";
				delBtn.style.height = "50px";
				delBtn.style.background = "pink";
				delBtn.style.float = "right";
				newDiv.appendChild(delBtn);
				//3：希望点击删除的时候把当前的盒子节点删除掉
				delBtn.onclick = removeDiv;
			}
			function removeDiv(){
				box.removeChild(this.parentNode);
			}

			//点击添加的时候产生随机色
			function rondomColor(){
				return "#"+ Math.floor(Math.random()*16*16*16*16*16*16).toString(16);
			}

		}
	</script></span>

（2）：下面的任务是完成一个图片验证码的功能：需求描述为：点击图片，生成验证码，输入，如果输入的一致，则提示验证成功，否则，验证失败

效果如图：

（2-1）:先搭建html框架，看下面的代码

<span style="white-space:pre">	</span><div id="div">
		<div id="leftDiv">
			<input type="text" name="text" id="inputText">
			<span id="lab">输入验证码</span>
		</div>
		<div id="righgDiv"></div>
	</div>

（2-2 ）：给html些样式，

<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#div{
			width: 300px;
			height: 250px;
			border: 1px solid red;
			margin: 0 auto;
			position: relative;
		}
		#leftDiv{
			display: inline-block;
		}
		#inputText{
			outline: none;
			border: 1px solid red;
			width: 140px;
			height: 30px;
			border-radius:30px;
			margin-top:120px; 
			margin-left: 10px;
		}
		#lab{
			display: block;
			height: 30px;
			margin-left:40px;
			margin-top:10px;  
		}
		#righgDiv{
			border: 1px solid blue;
			width: 80px;
			height: 80px;
			position: absolute;
			text-align: center;
			line-height: 80px;
			font-size:26px; 
			left: 200px;
			top: 100px;
		}

（2-3 ）：完成最核心的部分，完成验证功能，js代码如下

<script type="text/javascript">
		window.onload = function(){
			//1:点击右边的盒子，生成随机码，
			var strRightDiv = document.getElementById("righgDiv");
			var strInput = document.getElementById("inputText");
			var strLab = document.getElementById("lab");
			
			strRightDiv.onclick = validateCode;
			var str ;
			function validateCode(){
				var arr = ["1","2","3","4","5","6","7","8","9"];
				 str = arr[parseInt(Math.random()*100)%9]+arr[parseInt(Math.random()*100)%9]+arr[parseInt(Math.random()*100)%9]+arr[parseInt(Math.random()*100)%9];
				strRightDiv.innerHTML = str;
			}
			validateCode();
			strInput.onfocus = function(){
				strLab.innerHTML = "请输入验证码";
			}
			strInput.onblur = function(){

				if(str ==strInput.value ){
					strLab.innerHTML = "验证成功";
					strLab.style.color = "blue";
				}else{
					strLab.innerHTML = "验证失败,请重新输入";
					strLab.style.color = "red";
				}
			}
		}
	</script>