querySelector和css3选择器

最新推荐文章于 2024-04-19 20:18:55 发布

vcxiaohan2

最新推荐文章于 2024-04-19 20:18:55 发布

阅读量2.7k

点赞数 1

分类专栏：原生javascript

本文链接：https://blog.csdn.net/u011500781/article/details/51726984

版权

原生javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

querySelector：http://www.nowamagic.net/librarys/veda/detail/388

css3：http://www.w3school.com.cn/cssref/css_selectors.asp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>

    <style>
        * {margin: 0; padding: 0;}
        body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="a">a</div>
    <div class="b">b</div>
    <div class="c">
        <div class="d">
            <span>
                <a data="123"></a>
                <a data="456"></a>
                <a data="abc"></a>
                <a data="a b"></a>
                <a data="a b c"></a>
                <p data>ccc</p>
                <p>ddd</p>
            </span>
        </div>
        <div class="e">eee</div>
    </div>


    <script>
    window.onload = function() {
        var a = document.querySelector('#a'),
            b = document.querySelector('.b');

        console.log(a);//<div id="a">a</div>
        console.log(b);//<div class="b">b</div>

        var c1 = document.querySelector('.c span p');//默认选取第一个
        var c2 = document.querySelectorAll('.c span p');//选取的是一个数组
        var c3 = document.querySelectorAll('.c span p:first-child');//选取的是一个数组
        var c4 = document.querySelectorAll('.c *');//选取.c所有子级
        var c5 = document.querySelectorAll('.c, p');//选取.c和所有p元素
        var c6 = document.querySelectorAll('a+p');//选取a后面紧邻的p
        var c7 = document.querySelectorAll('[data]');//选取带有data属性的元素
        var c8 = document.querySelectorAll('[data~=a]');//选取data属性包含a这一项的元素
        var c9 = document.querySelectorAll('.c div:first-child');//选取.c的第一个子级div
        var c10 = document.querySelectorAll('p:not([data])');//选取.c的第一个子级div
        var c11 = document.querySelectorAll('span a:nth-child(2n)');//选取.c的第一个子级div

        console.log(c1);
        console.log(c2);
        console.log(c3);
        console.log(c4);
        console.log(c5);
        console.log(c6);
        console.log(c7);
        console.log(c8);
        console.log(c9);
        console.log(c10);
        console.log(c11);
















    }
    </script>
</body>
</html>

vcxiaohan2

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
querySelector和css3选择器

querySelector：http://www.nowamagic.net/librarys/veda/detail/388css3：http://www.w3school.com.cn/cssref/css_selectors.asp test * {margin: 0; padding: 0;} body {
复制链接

扫一扫