JavaScript之动态获取元素

一,使用方法

<!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标签元素

三.小例子

扫描二维码关注公众号，回复： 4802759 查看本文章

<!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元素长度值

JavaScript之动态获取元素

猜你喜欢