ch3. XML简介--操作Dom

最新推荐文章于 2023-12-11 11:25:54 发布

转载最新推荐文章于 2023-12-11 11:25:54 发布 · 546 阅读

Java Web学习笔记专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何使用JavaWeb技术实现一个简单的通讯录应用，包括前端表单输入和后端数据存储。

实际上，每个html文件都是一棵完整的dom树

<html>
	<head>
		<title>www.thystar.com </title>
	</head>
	<body>
		<h1>学习Java Web</h>
		<a href = "http://blog.youkuaiyun.com/thystar">thystar的专栏<a>
	</body>
</html>

其dom数的表现形式是：

使用javascript操作DOM

简单通讯录

<html>
<head>
	<title>www.thystar.com, thystar</title>
	<script language = "javascript">
		function addrow(){
			var tab = document.getElementById("tab") ;	// 取得table的节点对象
			var name = document.getElementById("name").value ;
			var tel = document.getElementById("tel").value ;
			var tr = document.createElement("tr") ;
			var tbody = document.createElement("tbody") ;
			var td_name = document.createElement("td") ;
			var td_tel = document.createElement("td") ;
			td_name.appendChild(document.createTextNode(name)) ;
			td_tel.appendChild(document.createTextNode(tel)) ;
			tr.appendChild(td_name);
			tr.appendChild(td_tel);
			tbody.appendChild(tr);
			tab.appendChild(tbody);
		}
	</script>
</head>
<body>
	姓名：<input type = "text" name = "name">
	电话号码：<input type = "text" name = "tel">
	<input type = "button" value = "增加" onclick = "addrow()">
	<TABLE id = "tab" border = "1">
		<TR>
			<TD>姓名</TD>
			<TD>电话号码</TD>
		</TR>
	</TABLE>
</body>
</html>