Javascript(9)

最新推荐文章于 2025-09-09 08:37:13 发布

weixin_30887919

最新推荐文章于 2025-09-09 08:37:13 发布

阅读量60

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml java ViewUI

原文链接：http://www.cnblogs.com/lhmlyx2723356/archive/2011/05/08/2040299.html

本文介绍了JavaScript DOM编程的基础概念，包括DOM模型的理解、DOM编程的目的、Node对象及其属性和方法，并通过四个例子展示了如何使用DOM修改属性、递归遍历DOM元素、新增节点以及操作表格数据。

这几天都在做无聊的PPT，都没有看Javascript的视频教程。呵呵，今天难得休假就看了两集。

依照惯例总结一下吧。

通过今天的视频，学了一点关于javascript的DOM编程基础。

1，DOM，Document Object Model 文档对象模型，可以把整个html文档理解为一颗dom树。

2，DOM编程就是为了动态（在代码运行之后）的给文档（DOM树）添加一些节点或得到修改节点的属性值。

3，Node对象：

可以把DOM中的每个节点理解为是一个类，它们有一个共同的父类Node，类似Java中的所有类都默认继承Object，DOM中的每个节点都继承至Node，如img标签button标签form标签（类）等都共同继承自Node类。

根据子类拥有父类的属性和方法，只要弄懂Node类得属性和方法，就可以操作所有html节点的属性和方法。

表格一：Node节点的常用属性

表格二：Node节点的类型即NodeType值

表格三：Node的常用方法

注意几个对象：仍需再慢慢学习的

event 是事件对象，也是内置对象，表示发生的某个事件。

keyCode 当前的按键编码。

srcElement 在那个控件中产生的此事件。

this （重点）

以下是我跟着学的四个例子。

1，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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function update()
{
var aa1=document.getElementById("aa").src="Node方法.jpg";
var bb1=document.getElementById("bb").value="修改成功";
var cc1=document.getElementById("cc").style.backgroundColor="blue";
}

</script>
</head>

<body>
<img id="aa" src="ajax.jpg" alt="日本"/>
<input type="button" id="bb" value="update" onclick="update()"/>
<div id="cc" style="background-color:#0000CC"></div>
</body>
</html>

2，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=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function showAllElement(node)
{
var childrens = node.childNodes;
alert("nodeType = "+node.nodeType+" nodeName = "+node.nodeName+"有"+childrens.lengrh+"个子节点");
for(var i=0;i<childrens.length;i++)
{
showAllElement(childrens[i]);
}
}
</script>
</head>

<body>
<div>
<input name="userName" />
<input type="button" value="查看" onclick="showAllElement(document)"
</div>
</body>
</html>

3，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=gb2312" />
<title>添加节点</title>
<style type="text/css">
<!--
#mydiv1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:1;
}
-->
</style>
<script type="text/javascript">
var i=0;
function addImg()
{
i++;
var img =document.createElement("img");
img.src="460.jpg";
img.title="apple"+i;
img.onclick=deleteMe;
var myadiv=document.getElementById("mydiv1");
myadiv.appendChild(img);
}

function deleteImg()
{
var myddiv=document.getElementById("mydiv1");
myddiv.removeChild(myddiv.lastChild);
}

function deleteMe()
{
event.srcElement.parentNode.removeChild(event.srcElement);
}

function aA()
{
var adda=document.createElement("a");
adda.href="http://www.g.cn";
adda.title="google"
var myText= document.createTextNode("google");
adda.appendChild(myText);
var myadiv=document.getElementById("mydiv1");
myadiv.appendChild(adda);
}
</script>
</head>

<body>
<div id="mydiv1">
<input type="button" id="aimg" value="添加图片" onclick="addImg()"/>
<input type="button" id-"dimg" value="删除图片" onclick="deleteImg()"/>
<input type="button" id="aa" value="添加超链接" onclick="aA()"/>
</div>
</body>
</html>

4，DOM TableDemo

<!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=gb2312" />
<title>tableDemo</title>
<script type="text/javascript">
function saveInfo(){
	var tb=document.getElementById("tb");
	
	var mytr=document.createElement("tr");
	mytr.align="center";
	var mytd1=document.createElement("td");
	var mytd2=document.createElement("td");
	var mytd3=document.createElement("td");
	mytd1.appendChild(document.createTextNode(document.getElementById("username").value));
	mytd2.appendChild(document.createTextNode(document.getElementById("userpwd").value));
	
	var mya=document.createElement("a");
	mya.href="#";
		mya.onclick=delMe;
	var del= document.createTextNode("删除");
mya.appendChild(del);
		mytd3.appendChild(mya);
		
	mytr.appendChild(mytd1);
	mytr.appendChild(mytd2);
	mytr.appendChild(mytd3);
	tb.appendChild(mytr);
}

function delMe()
{
var mytr=this.parentNode.parentNode;
if(confirm("您确定要删除"+mytr.firstChild.firstChild.nodeValue+"吗？"))
mytr.parentNode.removeChild(mytr);
}
</script>
</head>

<body>
<table align="center" border="0">
<tr>
<td>用户名：</td>
<td><input type="text" id="username"/></td>
<td><div id="errorname"></div></td>
</tr>

<tr>
<td>密码:</td>
<td><input type="password" id="userpwd"/></td>
<td><div id="errorpwd"></div></td>
</tr>

<tr>
<td colspan="3"><input type="button" value="注册" onclick="saveInfo()"/>
<input type="reset" value="清除"/>

</td>
</tr>

</table>
<table align="center" id="tb" border="1" width="80%" style="border-collapse:collapse">
<tr align="center">
<td>用户名</td>
<td>密码</td>
<td>操作</td>
</tr>
</table>
</body>
</html>

转载于:https://www.cnblogs.com/lhmlyx2723356/archive/2011/05/08/2040299.html