JavaScript基础DOM操作--创建删除节点

一、案例需求
在文本框中输入行数和列数，生成对应行数列数的表格，表格里面的数字和颜色是随机的。

二、涉及的知识点

• 创建节点的DOM操作
• Math对象中产生随机数的应用
• innerHTML

三、实现过程
1.编写HTML结构层

<div id="setting">
		<span>行数</span><input type="text" id="row">
		<span>列数</span><input type="text" id="col">
		<button id="createTable" onclick="createTable()">生成表格</button>
	</div>

2.样式层

<style type="text/css">
		table{
			border:1px solid #000;
		}

		td{
			color: #fff;
			cursor: pointer;
			text-align: center;
			border:1px solid #000;
			color: black;
		}
	</style>

3.JavaScript脚本控制层

	<script type="text/javascript">

		//动态创建一个表格
		function createTable() {
			var row=document.getElementById("row").value;
			var col=document.getElementById("col").value;
			var div=document.createElement("div");//创建一个div，存放一个动态生成的表格
			div.setAttribute("id","table");//设置div的id
			var divTable=document.getElementById("table");
			if(divTable!=null){
				document.body.removeChild(divTable);
			}

			var aRow=[];//定义表格的行
			var aCol=[];//定义表格的列

			//循环动态生成Table元素
			for(var i=row;i--;){
				aCol.length=0;//初始化表格中列长度
				for (var j = col;j--; ) {//构建表格中的每一列
					aCol.push("<td style=\"background:"+createColor()+";\">"+createRandom(1,15)+"</td>")
				}
				aRow.push("<tr>"+aCol.join("")+"</tr>");//join返回拆分后的数组
			}
			div.innerHTML="<table><tbody>"+aRow.join("")+"</table></tbody>";
			document.body.appendChild(div);//在body体里加入div
		}

		//随机生成数字，用于填充单元格
		function createRandom(lower,upper){
			return Math.floor(Math.random()*(upper-lower+1)+lower);
		}

		//随机生成颜色的代码
		function createColor(){
			return "#"+Math.floor(Math.random()*0xffffff).toString(16);
		}
	</script>

四、案例效果

五、总结与体会
1.创建一个节点后，还要用appendChild方法添加到父元素上
2.删除节点用removeChild方法
3.生成指定范围的随机数函数，传入该函数的参数是两个数，返回的最大值与最小值，Math.random()返回的是是一个小数值，因此要乘上范围的大小，即最大值-最小值+1
4.生成随机颜色的函数，因此颜色的是从#000000到#ffffff，因此可以把数值部分乘上随机数，再转换成十六机制与“#”进行拼接
5.join()用于返回指定分隔后的数组