JavaScript之动态获取元素

Posted 静心*尽力

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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标签元素

 


三.小例子

<!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之动态获取元素的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript单行代码,也就是代码片段

JavaScript之offset实现鼠标坐标获取和窗口内模块拖动-案例演示

jQ选择器学习片段(JavaScript 部分对应)

有没有办法使用相同的布局动态创建片段并向它们显示数据?

Javascript - 动态从数组中获取元素

如何从动态添加(使用 javascript)元素中获取值?