JavaScript--for循环和获取元素的第二种方法

来源：互联网发布：网络分线器的接法图解编辑：程序博客网时间：2024/06/05 05:54

for循环（注意是中括号）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        img{            width: 200px;            height: auto;        }    </style></head><body>    <div id="box">        <input type = "button" value ="点" id = "btn1">        <div id="val"></div>    </div></body></html><script type="text/javascript">    var oVal = document.getElementById("val");    var oBtn1 = document.getElementById("btn1");    var arr = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.png'];    var str ="";    oBtn1.onclick = function(){        //oVal.innerHTML += '<img src = "img/1.jpg" alt ="" />'        for(var i = 0; i<arr.length; i++){            //oVal.innerHTML += '<img src = "'+arr[i]+'" alt ="" />';性能不好,每次都在操作页面            str += '<img src = "'+arr[i]+'" alt ="" />';        }        oVal.innerHTML = str;    }</script>

显示结果

这里写图片描述

获取元素的第二种方法

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>    <ul id="ul1">    <!-- <li>1</li>        <li>2</li>        <li>3</li>        <li>4</li> -->    </ul>    <ol>        <li>5</li>        <li>6</li>    </ol></body></html><script type="text/javascript">    /*        geElementById 是获取一个 ---->是一个静态方法        getElementsByTagName 是获取一堆元素 ---->是一个动态方法        (在没有li的时候也能获取到后续操作产生的li)            会把元素放在数组里，通过数组下标来控制元素，即使只有一个元素也需要下标来控制    */    var oUl1 = document.getElementById("ul1");    //var oLi = document.getElementsByTagName("li");    var oLi = oUl1.getElementsByTagName("li");//这样的话相当于在ul1中去找li    for(var i =0;i<5;i++){        oUl1.innerHTML += '<li>'+i+'</li>';    }    alert(oLi.length);</script>

显示结果

这里写图片描述

阅读全文

0 0