一：Dom操作基础与高级应用
Node接口也定义了一些所有节点类型都包含的属性和方法.
二：创建和操作节点
1)创建新节点
createDocumentFragment()
创建文档碎片节点
createElement(tagname)
创建标签名tagname的元素
createTextNode(text)
创建包含文本text的文本节点
appendChild()
添加子元素
实例：
<html>
<head>
<title>createElementd() Example</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
function CreateP()
{
var Op = document.createElement("p");
var oText = document.createTextNode("Hellow World");
Op.appendChild(oText);
document.body.appendChild(Op);
}
function removeElement()
{
var oP = document.body.getElementsByTagName("p")[0];
//document.body.removeChild(oP);
oP.parentNode.removeChild(oP);
}
function ReplaceElement()
{
var oNewP = document.createElement("p");
var oText = document.createTextNode("aaaaaaaaaaaaaaaa");
oNewP.appendChild(oText);
var oOldP= document.body.getElementsByTagName("p")[0];
oOldP.parentNode.replaceChild(oNewP,oOldP);
}
function insertElement()
{
var oNewP = document.createElement("p");
var oText = document.createTextNode("aaaaaaaaaaaaaaaa");
oNewP.appendChild(oText);
var oOldP= document.body.getElementsByTagName("p")[0];
document.body.insertBefore(oNewP,oOldP);
}
//-->
</SCRIPT>
</head>
<body>
<p> Hellow</p>
<p> how are you?</p>
<p> ok</p>
<input type="button" value="createElement" onclick="CreateP()"/>
<input type="button" value="removeElement" onclick="removeElement()"/>
<input type="button" value="ReplaceElement" onclick="ReplaceElement()"/>
<input type="button" value="insertElement" onclick="insertElement()"/>
</body>
</html>
鼠标放上和离开的样式：
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <input type="button" value="click Me" style="background-color:white;color:black" onmouseover="this.style.backgroundColor=‘black‘;this.style.color=‘white‘;" onmouseout="this.style.backgroundColor=‘white‘;this.style.color=‘black‘"/> </BODY> </HTML>
鼠标放上去的提示：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta charset="utf-8" />
<SCRIPT LANGUAGE="JavaScript">
<!--
function showTip(oEvent)
{
//alert(document.documentElement.scrollTop);
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility ="visible";
oDiv.style.left = document.documentElement.scrollLeft+ oEvent.clientX+5;
oDiv.style.top = document.documentElement.scrollTop+oEvent.clientY+5;
}
function hiddenTip(oEvent)
{
var oDiv = document.getElementById("divTip1");
oDiv.style.visibility = "hidden";
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<a href="javascript:void(0)" onmouseover="showTip(event)"
onmouseout = "hiddenTip(event)">click me</a>
<div id="divTip1" style="background-color:Yellow;position:absolute;visibility:hidden;padding:5px;">
<span>这是提示<br />
提示</span>
</div>
</BODY>
</HTML>
时间： 2024-10-25 04:46:03