<!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>
<title>DOM Test</title>
<script type="text/javascript">
function Remove(num)
{
var pElement = document.getElementById("nav");
var cElement = pElement.getElementsByTagName("li")[num];
pElement.removeChild(cElement);
}
function Add(num)
{
var pElement = document.getElementById("nav");
var beforeNode = pElement.getElementsByTagName("li")[num];
var addNode = document.createElement("li");
pElement.insertBefore(addNode,beforeNode);
}
function AddStrongNode(num)
{
var pElement = document.getElementById("nav");
var createElement = document.createElement("strong");
createElement.appendChild(document.createTextNode("Home"));
pElement.childNodes.item(num).appendChild(createElement);
var addNode = document.createElement("li");
pElement.insertBefore(addNode,beforeNode);
}
function ReplaceFirst(num)
{
var pElement = document.getElementById("nav");
var createElement = document.createElement("li");
createElement.appendChild(document.createTextNode("ReplaceFirst"));
pElement.replaceChild(createElement,pElement.firstChild);
}
function ReplaceLast(num)
{
var pElement = document.getElementById("nav");
var createElement = document.createElement("li");
createElement.appendChild(document.createTextNode("ReplaceLast"));
pElement.replaceChild(createElement,pElement.lastChild);
}
function CloneNode(num)
{
var pElement = document.getElementById("nav");
var clonedNode = pElement.getElementsByTagName("li")[parseInt(num,10)];
var dolly = clonedNode.cloneNode(true);
pElement.insertBefore(dolly,clonedNode);
}
function CloneNextNode(num)
{
var pElement = document.getElementById("nav");
var clonedNode = pElement.getElementsByTagName("li")[parseInt(num,10)];
var nextNode = clonedNode.nextSibling;
var dolly = nextNode.cloneNode(true);
pElement.insertBefore(dolly,nextNode);
}
function ClonePreviousNode(num)
{
var pElement = document.getElementById("nav");
var clonedNode = pElement.getElementsByTagName("li")[parseInt(num,10)];
var nextNode = clonedNode.previousSibling;
var dolly = nextNode.cloneNode(true);
pElement.insertBefore(dolly,nextNode);
}
function Parent()
{
var pElement = document.getElementById("nav");
var cNode = pElement.getElementsByTagName("li")[3];
var pNode = cNode.parentNode;
alert("Node Value:"+pNode.nodeValue+"/nNode Name:"+pNode.nodeName+"/nNode Type:"+pNode.nodeType);
}
</script>
</head>
<body>
<div id="MyPage">
<div id="header">
<img alt="Logo" src="Images/logo.gif" />
</div>
<div id="navigation">
<ul id="nav">
<li><strong>Home</strong></li>
<li><a href="#">Artichles</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="Remove">
<ul id="removeNav">
<li>
<a href="#" onclick="Remove(0);">Remove Node</a> |
<a href="#" onclick="Add(0);">ADD Node</a> |
</li>
<li>
<a href="#" onclick="ReplaceFirst();">Replace First Node</a> |
<a href="#" onclick="ReplaceLast();">Replace Last Node</a> 
</li>
<li>
<a href="#" onclick="AddStrongNode(0);">ADD Strong Node In First Node</a>
</li>
<li>
<a href="#" onclick="CloneNode(1);">Clone Node</a> |
<a href="#" onclick="CloneNextNode(1);">Clone Next Node</a> |
<a href="#" onclick="ClonePreviousNode(1);">Clone Previous Node</a>
</li>
<li>
<a href="#" onclick="Parent();">Parent Node</a>
</li>
</ul>
</div>
</div>
</body>
</html>
这是前几天做的一些小练习,DOM高手,请多多赐教