1.什么是DOM
全称为Document Object Model。一个HTML文档即为DOM树
2.DOM编程能干什么,
动态(当Html代码加载到浏览器后动态的改变页面内容)
改变文档(改变节点属性,改变节点位置,添加删除节点)
3.Node节点
属性
常用方法
4.DOM练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tableTest</title>
<script type="text/javascript">
function saveInfo(){
var table = document.getElementById("table");
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
tr.trMouseOver;
tr.trMouseout;
alert("ssss");
var a = document.createElement("a");
a.href = "javascript:void(0)";
a.onclick = deleteRow;
var aTxt = document.createTextNode("删除");
a.appendChild(aTxt);
td3.appendChild(a);
var name = document.getElementById("name").value;
var nameTxt = document.createTextNode(name);
td1.appendChild(nameTxt);
var pwd =document.getElementById("PWD").value;
var pwdText =document.createTextNode(pwd);
td2.appendChild(pwdText);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
table.appendChild(tr);
}
function deleteRow(){
var table = document.getElementById("table");
var tr =this.parentNode.parentNode;
var userName =tr.firstChild.firstChild.nodeValue;
var ok =confirm("您确定要删除["+userName+"]吗?");
if(ok){
var table = document.getElementById("table");
var tr =this.parentNode.parentNode;
table.removeChild(tr);
}
}
function trMouseOver(){
this.bgColor="green" ;
}
function trMouseout(){
this.bgColor="white" ;
}
</script>
</head>
<body>
<form action="tableText.html" method="post" name="form">
<table width="281" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<th colspan="2" scope="col">DAM编程</th>
</tr>
<tr>
<td width="88">用户名:</td>
<td width="187">
<input type="text" name="name" id="name" value=""/></td>
</tr>
<tr>
<td>密 码:</td>
<td><input type="text" name="PWD" id="PWD" value=""/></td>
</tr>
<tr>
<td><input type="button" name="注册" id="注册" value="注册" "saveInfo()"/></td>
<td><input type="reset" name="reset" id="reset" /></td>
</tr>
</table>
</form>
<p> </p>
<table id="table" width="450" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<th scope="col">用户名</th>
<th scope="col">密码</th>
<th scope="col">操作</th>
</tr>
</table>
</body>
</html>