javaScrpt(3)———DOM编程

最新推荐文章于 2024-02-21 15:34:35 发布

mxz_3021

最新推荐文章于 2024-02-21 15:34:35 发布

阅读量120

点赞数

分类专栏： js 文章标签： js JavaScript DOM编程动态

本文链接：https://blog.csdn.net/qq_40320225/article/details/89145372

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文深入探讨了JavaScript中的DOM编程，包括DOM的定义、动态更新页面内容的能力、DOM节点的属性与方法，以及DOM练习案例，是理解并掌握DOM操作的重要教程。

摘要由CSDN通过智能技术生成

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>&nbsp;</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>

mxz_3021

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScrpt(3)———DOM编程

1.什么是DOM全称为Document Object Model。一个HTML文档即为DOM树2.DOM编程能干什么，动态（当Html代码加载到浏览器后动态的改变页面内容）改变文档（改变节点属性，改变节点位置，添加删除节点）3.Node节点属性常用方法4.DOM练习<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti...
复制链接

扫一扫

专栏目录