javascripts-for循环-while循环-标签的选择与操作

最新推荐文章于 2023-05-04 17:16:14 发布

原创最新推荐文章于 2023-05-04 17:16:14 发布 · 945 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍如何使用JavaScript操作DOM，包括通过id、标签名和类名获取元素，以及利用for和while循环修改多个元素的样式。展示了如何针对特定元素如ol下的li标签应用样式，并实现隔行换色的效果。

小结



document对象，根据id获取标签对象
document.getElementById(ID值)

document对象，根据标签获取对象们
document.getElementsByTagName(标签名)


for循环语句，写一个for循环，在控制台输出0到9之间的值
for(var i=0;i<10;i++){
    console.log(i);
}

while循环，在控制台输出0到9之间的值
while(i<10){
    console.log(i);
    i++;
}

for循环

for（定义初始值；定义条件；初始值变化）{循环代码}


js循环对比py循环
python中while循环的条件：
1，循环外要有初始条件
2，要有循环的判断条件
3，循环内部要对判断条件进行修改

while循环

外部定义初始值

while（条件）{
    执行代码
    初始值修改
}

获取标签的方法新增

之前我们只用

document.getElementById(strID)

强调

此法获得的标签是一个成员对象

它是一个对象，而不是一个容器

其它的方式，获取的是多个成员对象

即数组包成员对象

认识新的标签获取方法

提示英文

带s带表复数

apple 一个苹果

two apples 两个苹果

新的获取标签方法

document.getElementsByTagName("li")

通过li标签来获取，获取多个元素

注意

此法获取的是一个集合（数组）

如果需要操作具体的每一个标签对象

需要进行遍历

<script>
    window.onload = function () {
    var oLi1 = document.getElementById("list1")
    var oLis = document.getElementsByTagName("li")
    // alert(oLis) // [第一个li对象，第二个li对象]
    // alert(oLis.length)
    var iLen = oLis.length
        for(var i=0;i<iLen;i++){
            var oLi = oLis[i]
            oLi.style.backgroundColor = "red";
            oLi.style.width = 300;
            oLi.style.height = 100;
            oLi.style.marginBottom = 5;
            oLi.style.border = "1px solid black";
            oLi.style.listStyle = "none";
        }
    }
</script>


<div >
    <ul>
        <li id="list1">标签1</li>
        <li>标签2</li>
        <li>标签3</li>
        <li>标签4</li>
        <li>标签5</li>
        <li>标签6</li>
    </ul>
</div>

效果

小结常用的标签获取方式

getElementById（strID名称）

getElementsByTagName（str标签名称）

getElementsByClassName（str类的名称）

注意

只有通过id获取的，是标签对象，是可以直接操作的

其它Elements方式拿的都是数组的形式，标签对象在数组里面，需要通过遍历或者通过数组【下标】来获取到标签对象

只修改ol标签中的li元素的样式

思路

先锁定ol标签对象

然后再向下找到所有的li标签

知识点

对象.getElementsByTagName（标签名称）

<script>
    window.onload = function () {
    var oOlist = document.getElementById("olist")  //<ol>
        // document文档对象的元素（通过ID获取的）


    var oLis = oOlist.getElementsByTagName("li")
        // oOlist对象的元素(通过li标签获取到的)

    var iLen = oLis.length
        for(var i=0;i<iLen;i++){
            var oLi = oLis[i]
            oLi.style.border="1px solid green"
        }
    }
</script>


<div >
    <ul>
        <li id="list1">标签1</li>
        <li id="list1">标签2</li>
    </ul>

    <ol id="olist">
        <li>ol1</li>
        <li>ol2</li>
        <li>ol3</li>
    </ol>
</div>

隔行换色

思路

判断行数，如果是偶数行，就给样式，否则不变。

效果

代码

<style>
    ol li{
        width:800px;
        height: 30px;
        border:1px solid black;
        margin-top:-1px;
        list-style: none;
    }
</style>

<script>
    window.onload = function () {
    var oOlist = document.getElementById("olist")  //<ol>
        // document文档对象的元素（通过ID获取的）


    var oLis = oOlist.getElementsByTagName("li")
        // oOlist对象的元素(通过li标签获取到的)

    var iLen = oLis.length
        for(var i=0;i<iLen;i++){
            var oLi = oLis[i];
            if(i%2 != 0){
                oLi.style.backgroundColor = "pink";
            }
        }
    }
</script>


<div >
    <ul>
        <li id="list1">标签1</li>
        <li id="list1">标签2</li>
    </ul>

    <ol id="olist">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ol>
</div>