JavaScript之動態獲取元素
阿新 • • 發佈：2019-01-06
一,使用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>getElementByTagName</title> </head> <body> <ul id="ul"> <li>1</li> <li>2</li> <li>3</li><li>4</li> </ul> </body> </html> <!-- getElementById 是獲取一個 getElementsByTagName 是獲取一堆元素 通過陣列下標獲得特定元素區(必要),否則會出現underfined異常 --> <script type="text/javascript"> var ul=document.getElementById('ul'); var oli=document.getElementsByTagName('li'); alert(oli[2].innerHTML); </script>
點選效果:
二.注意事項
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>getElementByTagName</title> 6 </head> 7 <body> 8 <ul id="ul"> 9<li>1</li> 10 <li>2</li> 11 <li>3</li> 12 <li>4</li> 13 </ul> 14 <ol> 15 <li>5</li> 16 <li>6</li> 17 </ol> 18 </body> 19 </html> 20 21 <script type="text/javascript"> 22 var ul=document.getElementById('ul'); 23 var oli=document.getElementsByTagName('li'); 24 alert(oli.length); 25 </script>
我要表達的是:
var oli=document.getElementsByTagName('li');
因為這行程式碼,我們是在document下尋找li元素個數,故而ol下的兩個li元素也被計算進去
若只是想尋找ul下的li元素個數,對程式碼進行如下修改:
var oli=ul.getElementsByTagName('li');
程式碼意義是在獲取ul下的li標籤元素
三.小例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>getElementByTagName注意事項</title> </head> <body> <ul id="ul"> </ul> <ol> <li>5</li> <li>6</li> </ol> </body> </html> <script type="text/javascript"> var ul=document.getElementById('ul'); var oli=ul.getElementsByTagName('li'); for(var i=0;i<5;i++){ ul.innerHTML+='<li>'+i+'</li>' } alert(oli.length); </script>
雖然是新增上的五個li元素,但是由於是從ul下獲取li元素,依舊可以動態的獲取到準確的五個li元素長度值