DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> document節點對象的獲取方式示例介紹
document節點對象的獲取方式示例介紹
編輯:JavaScript綜合知識     

 如果要操作一個元素,首先要獲取到它,下面為大家介紹下document節點對象的獲取方式,感興趣的朋友不要錯過

代碼如下: <html>  <head>  <title></title>  <script>    /*  document節點對象的獲取方式:    */  //第一種,通過id獲取  function documentDemo(){  var tableNode = document.getElementById("tab_id");  tableNode.style.border = "5px solid #00ff00";  }  //第二種,通過name屬性  function documentDemo2(){  var inputNode = document.getElementsByName("txt");  alert(inputNode.length);  alert(inputNode[0].value);    }  //第三種,通過標簽名  function documentDemo3(){  var tdNode = document.getElementsByTagName("td");  alert(tdNode.length);  for(var x = 0 ; x < tdNode.length;x++){  alert(tdNode[x].innerText);  }  }  </script>    <style type="text/css">  .onediv{  width:200px;  height:100px;  border:1px solid #f00;  margin-top:20px;  }    table ,td{  border:1px solid #00f;  width:200px;  margin-top:20px;  text-align:center;  }  </style>    </head>    <body>  <input type="button" value="document對象演示" onclick="documentDemo3()"><br/>  <div class="onediv">  這是div中的內容  </div>    <input type="txt" name="txt" >  <input type="txt" name="txt" >      <table cellspacing="0" id="tab_id">  <tr>  <td>java</td>  <td>php</td>  </tr>  <tr>  <td>.net</td>  <td>ios</td>  </tr>  </table>    <span>這是一個span區域</span> <br/>  <a href="#">這是一個超鏈接</a>  <body>    </html>   
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved