萬盛學電腦網 >> 腳本專題 >> javascript >> document節點對象的獲取方式示例介紹
document節點對象的獲取方式示例介紹
如果要操作一個元素，首先要獲取到它，下面為大家介紹下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>javascript排行
程序編程推薦
相關文章
圖片文章
copyright © 萬盛學電腦網 all rights reserved