javascript 对dom 的操作

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

<!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>ggg</title>
    <script language="javascript" type="text/javascript">

     function start() {
        // 获得所有tagName是body的元素（当然每个页面只有一个）
       myDocumentElements=document.getElementsByTagName("body");
       myBody=myDocumentElements.item(0);
        // 获得body子元素种的所有P元素
        myBodyElements=myBody.getElementsByTagName("p");
        // 获得第二个P元素
        myP=myBodyElements.item(1);
       //显示这个元素的文本
        alert(myP.firstChild.nodeValue);
    }



    function wow() {

alert("我好象没有点鼠标啊");

}




    var documentTree=document;
    var htmlElement=documentTree.documentElement;
   // alert("this is "+htmlElement.nodeName);
    var headElement=htmlElement.getElementsByTagName("head")[0];
    if(headElement!=null)
    {
//    alert("now this is:"+headElement.nodeName);
    }
    var titleElement=htmlElement.getElementsByTagName("title")[0];
    if(titleElement!=null)
    {
   // alert("title"+titleElement.nodeName);

     //alert("D1");
        var titleFristChild=titleElement.fristChild;
        //alert("title'"+titleFristChild.nodeValue+"'");
       // alert("D2");//受上一行影响而不能响应
     }

       // alert("D3");


   // alert("D4");
    var bodyElement=headElement.nextSibling;
    //var bodyElementFristchild=bodyElement.fristChild;
   // alert("title'"+bodyElementFristchild.nodeValue+"'");
   //head
   while(bodyElement.nodeName.toLowerCase() != "body")
   {
        bodyElement=bodyElemnt.nextSibling;
        alert("D5");
   }
   if(bodyElement.hasChildNodes())
   {
        for (i=0; i<bodyElement.childNodes.length; i++) {
          var currentNode = bodyElement.childNodes[i];
          if (currentNode.nodeName.toLowerCase() == "img") {
            bodyElement.removeChild(currentNode);
          }
        }

   }

    </script>
</head>
<body onload="start()">
    <form id="form1" runat="server">
    <div id="main-body">
   <div id="contents">
    <table>
     <tr><th>Steps</th><th>Process</th></tr>
     <tr><td>1</td><td>Figure out the <em>root element</em>.</td></tr>
     <tr><td>2</td><td>Deal with the <span id="code">head</span> first,
         as it's usually easy.</td></tr>
     <tr><td>3</td><td>Work through the <span id="Span1">body</span>.
         Just <em>take your time</em>.</td></tr>
    </table>
   </div>
   <div id="closing">
    This link is <em>not</em> active, but if it were, the answers
    to this <a href=""><img src="" alt="ee" /></a> would
    be there. But <em>do the exercise anyway!</em>
   </div>
</div>

<div id="divId"><p>h</p>
Just for testing;
</div>
<div id="Div1">
Just for testing;
</div>
<script language="javascript" type="text/javascript">
var div=document.getElementById('divid');
alert(div.nodeName);
</script>

<div name="george">f</div>
<div name="george1">f</div>
<script language="javascript" type="text/javascript">
var georges=document.getElementsByName("george");
alert(georges.nodeName);
</script>

<p>hi</p>
<p>hello</p>

<div id="test">fffffffffffffffffffffffffffffffffffff</div>

var newdiv=document.createElement("div")

var newtext=document.createTextNode("A new div")

newdiv.appendChild(newtext)

document.getElementById("test").appendChild(newdiv)

</script>

<asp:Repeater ID="rpf" runat="server">
    <HeaderTemplate>
    <table style="width:700px; " rules="all" cellpadding="0" cellspacing="0">
    </HeaderTemplate>

    <ItemTemplate>

    <tdstyle ><%=themeCount%></td>
    <td><asp:Label ID="lb1" runat="server"></asp:Label></td>

    </tr>
    </ItemTemplate>

    <FooterTemplate>
    </table>
    </FooterTemplate>
    </asp:Repeater>

    <div id="father">father<div id="child">A child</div></div>

var childnode=document.getElementById("child")

var removednode=document.getElementById("father").removeChild(childnode)

</script>

p=document.getElementById("mypara");

pclone = p.cloneNode(true);

p.parentNode.appendChild(pclone);
    </script>
    </div>


    <div id="adiv">
    <span id="innerspan">span</span>

var oldel=document.getElementById("innerspan");

var newel=document.createElement("p");

var text=document.createTextNode("ppppp");

newel.appendChild(text);

document.getElementById("adiv").replaceChild(newel, oldel);

</script>
</div>

<div id="ff">
<span id="lovespan">熊掌我所欲也!lovespan</span>
<script language="javascript" type="text/javascript">
var ff=document.getElementById("ff");
var lovespan=document.getElementById("lovespan");

var newspan=document.createElement("span");
var text=document.createTextNode("new nww w span");
newspan.appendChild(text);
var newspanref=ff.insertBefore(newspan, lovespan);

//newspanref.innerHTML="鱼与";

</script>
</div>

var div = document.getElementById("test");

div.click();

</script>
</form>
</body>
</html>

posted on 2006-11-02 15:33 javaca88 阅读(193) 评论(0) 收藏举报

刷新页面返回顶部

漫漫技术人生路

公告