HTML5-dom操作

最新推荐文章于 2022-03-06 23:42:47 发布

943学前端

最新推荐文章于 2022-03-06 23:42:47 发布

阅读量215

点赞数

分类专栏： HTML5笔记文章标签： html5

本文链接：https://blog.csdn.net/weixin_49924309/article/details/107852849

版权

HTML5笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red {
            color: red;
        }
        
        .green {
            color: green;
        }
        
        .blue {
            color: blue;
        }
    </style>
</head>

<body>
    <li>请选择</li>
    <li class="red">前端</li>
    <li class="green">Java</li>
    <li class="blue">JavaScript</li>
    <li id="c">JavaScript</li>
</body>
<script>
    /* 获取第一个li标签 */
    window.onload = function() {
        /* ElementsByTagName获取的是数组 */
        /* 索引：不直观 以后的数据都是从后台动态获取，前台动态生成添加 */
        /* var cli=document.getElementsByTagName("li")[1] */
        // console.log(cli);

        // query:查询 Selector:选择器  querySeletor(传入选择器名称)
        // querySelector：获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素
        // 参数要求：如果是类选择器，必须添加。如果是id选择器，必须添加，否则当成标签处理
        var javali = document.querySelector(".green");
        // var javali = document.querySelector("#c");
        console.log(javali);

        // querySelectorAll获取满足条件的所有元素--数组
        var allLi = document.querySelectorAll("li")[0];
        console.log(allLi);
    }
</script>

</html>

943学前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5-dom操作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .red {
复制链接

扫一扫