DOM方法和属性使用范例

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title>DOM方法和属性</title>
    <script language="javascript">
    function AddElement()
    {
        var para = document.createElement("p");
        para.setAttribute("title","My paragraph");
        var message = document.createTextNode("hello world");
        para.appendChild(message);
        document.getElementById("container").appendChild(para);

        //alert(para.nodeName); //P
        //alert(message.nodeName); //#text
        //alert(para.nodeType); //1
        //alert(message.nodeType); //3

    //var value = para.getAttribute("title");
    //alert(value);
    }

    function CloneNode()
    {
        var para = document.createElement("p");
        para.setAttribute("id","p1");
        para.setAttribute("title","My paragraph");
        var message = document.createTextNode("hello world");
        para.appendChild(message);
        document.getElementById("container").appendChild(para);

        var newpara = para.cloneNode(true);
        //alert(newpara.getAttribute("id"));
        newpara.setAttribute("id","p2");
        //alert(newpara.childNodes[0].nodeValue);
        document.getElementById("container").appendChild(newpara);
    }

    function Analyse()
    {
        var sel = document.getElementById("sel2");
        alert(sel.childNodes.length); //6
        var NodesArray = sel.childNodes;
        for(var i=0;i<NodesArray.length;i++)
        {
            //alert(sel.childNodes[i].nodeName);
            if(i%2 != 0) // 1 3 5
            {
                //var _value = sel.childNodes[i].childNodes[0].nodeValue;
                //var _value = sel.childNodes[i].getAttribute("value");
                //var _value = NodesArray[i].childNodes[0].nodeValue;
                var _value = NodesArray.item(i).childNodes[0].nodeValue;
                alert(_value);
            }
            else
            {
                //var value = sel.childNodes[i].nodeValue;
                //alert(value);
            }
        }
    }

    function RemoveChild()
    {
        var sel2 = document.getElementById("sel2");
        if(sel2.hasChildNodes)
        {
            var firstoption = sel2.childNodes[1];
            if(firstoption)
            {
                var removednode = firstoption.parentNode.removeChild(firstoption);
                alert(removednode.childNodes[0].nodeValue);
            }
        }
    }

    function ReplaceChild()
    {
        var sel2 = document.getElementById("sel2");
        var newoption = document.createElement("option");
        newoption.setAttribute("value","4");
        var text = document.createTextNode("4");
        newoption.appendChild(text);

        var oldoption = sel2.replaceChild(newoption,sel2.childNodes[1]);//返回oldoption

        //alert(oldoption.getAttribute("value"));
    }

    function CycleSelect1()//遍历下拉列表各个选项从第一个开始
    {
        var sel2 = document.getElementById("sel2");
        //alert(sel2.tagName);

        var tempChild = null;
        tempChild = sel2.firstChild;
        while(tempChild)
        {
            if(tempChild.tagName == "OPTION")
            {
                //alert(tempChild.tagName);
                alert(tempChild.getAttribute("value"));
            }

            tempChild = tempChild.nextSibling;
        }
    }
    function CycleSelect2()//遍历下拉列表各个选项从最后一个开始
    {
        var sel2 = document.getElementById("sel2");
        //alert(sel2.tagName);

        var tempChild = null;
        tempChild = sel2.lastChild;
        while(tempChild)
        {
            if(tempChild.tagName == "OPTION")
            {
                //alert(tempChild.tagName);//OPTION
                //alert(tempChild.nodeName);//OPTION
                alert(tempChild.getAttribute("value"));
            }

            tempChild = tempChild.previousSibling;
        }
    }

    function GetElementsByTagName()
    {
        var sel2 = document.getElementById("sel2");
        var _array = sel2.getElementsByTagName("OPTION");
        for(var i=0;i<_array.length;i++)
        {
           var _value = _array.item(i).childNodes[0].nodeValue;
           alert(_value);
        }
    }

    function appendChildCutPaste()//剪切粘贴
    {
        var sel2 = document.getElementById("sel2");
        var child1 = sel2.getElementsByTagName("OPTION").item(0);
        sel2.appendChild(child1);
    }

    function InsertBefore()
    {
        var sel2 = document.getElementById("sel2");

        var _text = sel2.options.length.toString();

        var newoption = document.createElement("option");
        newoption.setAttribute("value",_text);
        var text = document.createTextNode(_text);
        newoption.appendChild(text);

        sel2.insertBefore(newoption,sel2.lastChild);
    }

    function InsertBeforeCutPaste()
    {
        var sel2 = document.getElementById("sel2");
        sel2.insertBefore(sel2.options[0],sel2.lastChild);
    }

    function insertAfter(newElement,targetElement)//把给定节点插入到给定子节点的后面
    {
        var parent = targetElement.parentNode;
        if(parent.lastChild == targetElement)
        {
            parent.appendChild(newElement);
        }
        else
        {
            parent.insertBefore(newElement,targetElement.nextSibling);
        }
    }

    function InsertAfter()
    {
        var sel2 = document.getElementById("sel2");

        var _text = sel2.options.length.toString();

        var newoption = document.createElement("option");
        newoption.setAttribute("value",_text);
        var text = document.createTextNode(_text);
        newoption.appendChild(text);

        insertAfter(newoption,sel2.lastChild);
    }

    function InsertAfterCutPaste()
    {
        var sel2 = document.getElementById("sel2");
        insertAfter(sel2.options[0],sel2.lastChild);
        //insertAfter(sel2.options[0],sel2.options[2]);
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">

        <input type="button" value="提交" onclick="AddElement();" />
        <input type="button" value="CloneNode" onclick="CloneNode();" />
        <div id="container">
        </div>
        <hr />
        <select id="sel1" multiple size=1>
            <option selected value=1>1</option>
            <option value=2>2</option>
            <option value=3>3</option>
        </select>
        <hr />

         <select id="sel2" size="1">
            <option selected value=0>0</option>
            <option value=1>1</option>
            <option value=2>2</option>
        </select><br />
         <input type="button" value="分析" onclick="Analyse();" />
         <input type="button" value="RemoveChild" onclick="RemoveChild();" />
         <input type="button" value="ReplaceChild" onclick="ReplaceChild();" />
         <input type="button" value="遍历下拉列表各个选项从第一个开始" onclick="CycleSelect1();" />
         <input type="button" value="遍历下拉列表各个选项从最后一个开始" onclick="CycleSelect2();" />
         <input type="button" value="GetElementsByTagName" onclick="GetElementsByTagName();" />
         <br />
         <input type="button" value="appendChild剪切粘贴" onclick="appendChildCutPaste();" />
         <input type="button" value="insertBefore" onclick="InsertBefore();" />
         <input type="button" value="insertBefore剪切粘贴" onclick="InsertBeforeCutPaste();" />
         <input type="button" value="insertAfter" onclick="InsertAfter();" />
         <input type="button" value="insertAfter剪切粘贴" onclick="InsertAfterCutPaste();" />
    </form>
</body>
</html>

DOM方法和属性 使用范例

DOM方法和属性使用范例