一,使用方法
<!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元素长度值