html5 新的选择器

最新推荐文章于 2023-10-07 22:30:05 发布

M_SIDAER

最新推荐文章于 2023-10-07 22:30:05 发布

阅读量1.3k

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/M_SIDAER/article/details/52832694

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

html5 新的选择器

1、querySelector

类似于jq里的$()方法，但是只能取到第一个元素

<body>
<ul>
    <li class="li2"></li>
    <li class="li2"></li>
</ul>
<script>
    var oLi=document.querySelector(".li2");
    oLi.style.backgroundColor='red';
</script>
</body>

只取到第一个类li2

2、querySelectorAll

只能取到一个集合，即使只有一个元素

<body>
<ul>
    <li class="li2"></li>
    <li class="li2"></li>
</ul>
<script>
    var oLi=document.querySelectorAll('.li2');//oli取到的是一个类集合，所以加样式要用for循环
    for(var i=0;i<oLi.length;i++){
        oLi[i].style.backgroundColor='red';
    }
</script>
</body>

3、getElementsByClassName

通过class的方式取到一个元素的集合

<body>
<ul>
    <li class="li2"></li>
    <li class="li2"></li>
</ul>
<script>
    var oLi=document.getElementsByClassName('li2');//oli取到的是一个类集合，所以加样式要用for循环
    for(var i=0;i<oLi.length;i++){
        oLi[i].style.backgroundColor='red';
    }
</script>
</body>