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>
    <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>&nbsp|
                <a href="#" onclick="Add(0);">ADD Node</a>&nbsp|

            </li>
            <li>
                <a href="#" onclick="ReplaceFirst();">Replace First Node</a>&nbsp|
                <a href="#" onclick="ReplaceLast();">Replace Last Node</a>&nbsp
            </li>
            <li>
                <a href="#" onclick="AddStrongNode(0);">ADD Strong Node In First Node</a>
            </li>
            <li>
                <a href="#" onclick="CloneNode(1);">Clone Node</a>&nbsp|
                <a href="#" onclick="CloneNextNode(1);">Clone Next Node</a>&nbsp|
                <a href="#" onclick="ClonePreviousNode(1);">Clone Previous Node</a>
            </li>
            <li>
                <a href="#" onclick="Parent();">Parent Node</a>
            </li>
        </ul>
    </div>
</div>
</body>
</html>