最近几天完成了对JS中DOM和DOM节点，节点对象，Element对象，Attribute对象的学习。DOM是Javascript操作网页的接口，全称叫文档对象模型（Document Object Model）。它的作用是将网页转化为一个Javascript对象，从而用Javascript脚本进行各种操作（比如增删元素等）。
今天的作业是制作一个可以通过input 来直接对表格添加行，在表格每行的备注栏里添加删除按钮，点击删除按钮直接删除该行。算是对学习的节点只是的简单应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dom练习</title>
</head>
<body>
姓名：<input type="text" id="name" />
联系方式：<input type="text" id="email" />
年龄：<input type="text" id="age"/>
<input type="button" value="添加用户" onclick="addLine()"/><br>
<br /><br /><hr /><br />
<table id="userTable" align="center" border=1 cellspacing=0 cellpadding=5 width="50%">
<tr>
<th>姓名</th>
<th>联系方式</th>
<th>年龄</th>
<th>操作</th>
</tr>
<tr>
<td>xiaowang</td>
<td>[email protected]</td>
<td>15</td>
<td>
<input type="button" value="删除" onclick="delLine(this)" />
</td>
</tr>
</table>
<script>
function addLine(){
var name=document.getElementById('name');
var namevalue=name.value;
var email=document.getElementById('email');
var emailvalue=email.value;
var age=document.getElementById('age')
var agevalue=age.value;
var table=document.getElementById('userTable');
var addrow='<tr><td>'+namevalue+'</td><td>'+emailvalue+'</td><td>'+agevalue+'</td><td> <input type="button" value="删除" onclick="delLine(this)" /></td></tr>';
var oldrow=table.innerHTML;
var addrow=oldrow+addrow;
table.innerHTML=addrow;
}
function delLine(ob){
var deltr=ob.parentNode.parentNode;
var table=deltr.parentNode;
table.removeChild(deltr);
}
</script>
</body>
</html>