ch3. XML简介--操作Dom

最新推荐文章于 2023-11-10 18:38:53 发布

thystar

最新推荐文章于 2023-11-10 18:38:53 发布

阅读量511

点赞数

分类专栏： Java Web学习笔记

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

22 篇文章 0 订阅

订阅专栏

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

<html>
	<head>
		<title>www.thystar.com </title>
	</head>
	<body>
		<h1>学习Java Web</h>
		<a href = "http://blog.csdn.net/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>