JavaScript之使用CSS选择器

最新推荐文章于 2024-05-04 20:39:06 发布

极客研究者

最新推荐文章于 2024-05-04 20:39:06 发布

阅读量2.1k

点赞数 1

分类专栏： JavaScript 文章标签： js javascript

本文链接：https://blog.csdn.net/qq_34550459/article/details/105791199

版权

JavaScript 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

Demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>在JS中使用CSS选择器</title>
    <script>
        /*
        querySelector()、querySelectorAll()
        这两个方法能够根据CSS选择器规范,便捷定位文档中指定元素
        */
        window.onload=function(){
            debugger;
            var innerDiv= document.querySelector('.outer .inner');//返回的是一个元素对象
            console.log(innerDiv.innerHTML);

            //可一次性获取多个class属性值的多个对象
            var liList=document.querySelectorAll("li.red,li.blue");
            console.log(liList.length);
        }
    </script>
</head>
<body>
    <div class="outer">
        outer div
        <div class="inner">inner div</div>
    </div>

    <div class="box">box div</div>

    <div class="content">
        <ul>
            <li>首页</li>
            <li class="red">财经</li>
            <li class="blue">娱乐</li>
            <li class="red">时尚</li>
            <li class="blue">互联网</li>
            
        </ul>
    </div>

</body>
</html>

极客研究者

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之使用CSS选择器

Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
复制链接

扫一扫

专栏目录