javascript開發系列(DOM操作)

選擇元素:document.getElementsByTagName,document.getElementsById,document.getElementsByName。

               firstChild,lastChild,nextSibling,previousSibling

創建元素:document.createElement(),appendChild();

刪除元素:removeChild();

實例:

<!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>無標題頁</title>
    <style>
      .txt{ color:Red; border:solid 1px #ff0000}
    </style>
     <script type="text/javascript">
    
       function chElement()
       {  
        var txtAry=document.getElementsByTagName("input");
        document.getElementsByTagName
        for(i=0;i<txtAry.length;i++)
        {
          alert(txtAry[i].id);
        }
       }

      
    function crtElement()
    {
     var obCrt=document.getElementById("dvCreate");
     var obTxt=document.createElement("input");
     obTxt.type="text";
     obTxt.id="crtTxt";
     dvCreate.appendChild(obTxt);
    }
   
    function setAtr()
    {
      //var strColor="#ff0000";
     // (document.body.bgColor=='#ffffff')?document.body.bgColor="#000000":document.body.bgColor=strColor;
       var txtAry=document.getElementsByTagName("input");
        for(i=0;i<txtAry.length;i++)
        {
         txtAry[i].className="txt";
        }
    }
     </script>
</head>
<body>
    <form id="form1" runat="server" name="cc">
    <div id="dv0">
        <input id="txt1" type="text" />
        <input id="txt2" type="text" />
        <input id="txt3" type="text" />
        <input id="Button1" type="button" value="選擇" onclick="chElement()"/>
       
        <input id="Button2" type="button" value="新建" onclick="crtElement()"/>
         <input id="Button3" type="button" value="設置" onclick="setAtr()"/>
        <div id="dvCreate">
         
        </div>
       
   </div>
    
    </form>
</body>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章