【JavaScript】010.通过标签获取元素

最新推荐文章于 2023-08-09 20:15:20 发布

Spade_

最新推荐文章于 2023-08-09 20:15:20 发布

阅读量336

点赞数 4

分类专栏： JavaScript 文章标签： javascript html css

本文链接：https://blog.csdn.net/Spade_/article/details/105903854

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1.目的

通过标签获取元素
在这里插入图片描述

2.示例代码

图片及源码的github链接
010.通过标签获取元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>010.通过标签获取元素</title>
    <script type="text/javascript">
        window.onload = function () {
            // 通过标签名获取li元素，生成一个选择集，赋值给aLi
            var aLi = document.getElementsByTagName("li");
            for(var i = 0; i < aLi.length; ++i){
                aLi[i].style.backgroundColor = "gold";
            }

            // 不能给选择集设置样式属性
            // aLi.style.backgroundColor = "gold";

            // 第一个ul的li
            var oUl = document.getElementById("list1");
            var aLi1 = oUl.getElementsByTagName("li");
            for(var i = 0; i < aLi1.length; ++i){
                if(i % 2 == 0){
                    aLi1[i].style.backgroundColor = "red";
                }
            }
        }
    </script>
</head>
<body>
    <ul id="list1" class="list1">
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>

    <ul class="list2">
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
        <li>2</li>
    </ul>
</body>
</html>

Spade_

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】010.通过标签获取元素

1.目的通过标签获取元素2.示例代码图片及源码的github链接 010.通过标签获取元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>010.通过标签获取元素</title> <script...
复制链接

扫一扫

专栏目录