1. 程式人生 > >JS中獲取元素的第二種方法

JS中獲取元素的第二種方法

utf display 獲取 重復執行 ecb sed 文檔 練習 elements

1.靜態方法

  var oUl = document.getElementById(‘‘);

2.動態方法

  document.getElementsByTagName(‘‘);

技術分享
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>無標題文檔</title>
 6 <script>
 7 /*
 8 #list {}        var oUl = document.getElementById(‘list‘);                            靜態方法
9 10 li {} document.getElementsByTagName(‘li‘); 動態方法 11 #list li {} var aLi = oUl.getElementsByTagName(‘li‘); 12 // aLi => [ li, li, li ] 元素的集合 13 aLi.length 3
14 aLi[0] 15 // 在用 TagNasme 的時候,必須要加上:[] 16 */ 17 window.onload = function (){ 18 // var oUl = document.getElementById(‘list‘); 19 var oUl = document.getElementsByTagName(‘ul‘)[0]; 20 var aLi = oUl.getElementsByTagName(‘li‘); 21 22 //
document.getElementsByTagName(‘li‘); 23 24 // alert( aLi.length ); 25 }; 26 </script> 27 </head> 28 29 <body> 30 31 <ul id="list"> 32 <li></li> 33 <li></li> 34 <li></li> 35 </ul> 36 37 <ol> 38 <li></li> 39 <li></li> 40 </ol> 41 42 </body> 43 </html>
示例代碼 技術分享
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 5 <title>無標題文檔</title>
 6 
 7 <script>
 8 window.onload = function (){
 9     // document.title = 123;
10     // document.body.innerHTML = ‘abc‘;
11     var aBtn = document.getElementsByTagName(‘input‘);
12     
13     // alert(aBtn.length);
14     
15     document.body.innerHTML = ‘<input type="button" value="按鈕" /><input type="button" value="按鈕" /><input type="button" value="按鈕" />‘;
16     
17     // alert(aBtn.length);
18     aBtn[0].onclick = function (){ alert(1); };
19     aBtn[1].onclick = function (){ alert(1); };
20     aBtn[2].onclick = function (){ alert(1); };
21     
22     // 重復執行某些代碼
23     // 每次執行的時候,有個數字在變化
24 };
25 </script>
26 
27 </head>
28 
29 <body>
30 </body>
31 </html>
小練習題

JS中獲取元素的第二種方法