码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript之动态获取元素

时间:2019-01-06 15:35:32      阅读:380      评论:0      收藏:0      [点我收藏+]

标签:技术分享   ntb   doc   doctype   bsp   注意   title   alt   使用   

一,使用方法

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

JavaScript之动态获取元素

标签:技术分享   ntb   doc   doctype   bsp   注意   title   alt   使用   

原文地址:https://www.cnblogs.com/zjm1999/p/10228928.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!