JavaScript之使用CSS选择器

最新推荐文章于 2024-09-20 02:44:07 发布

极客研究者

最新推荐文章于 2024-09-20 02:44:07 发布

阅读量2.2k

点赞数 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>