社区首页 >专栏 >新增的querySelector、querySelectorAll测试

新增的querySelector、querySelectorAll测试

全栈程序员站长

发布于 2022-07-15 06:55:01

39300

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是全栈君。

从IE9开始DOM开始支持支持CSS的选择器了，DOM提供了两个接口

querySelector 得到一个DOM

querySelectorAll 得到一组DOM

一个个的解释这些选择器也没有必要，我们结合前面的数组知识，写一段代码来说明。页面上有一组元素，然后会依据我们数组中的预订选择值选择相应元素，并将背景变红色，同时提示选择器的含义。这样的代码便于运行理解和扩展。

html的结构部分

<body>  
    <div>  
        <input type="button" value="开始测试" />  
        <span></span><span></span>  
    </div>  
    <ol>  
        <li title="abc1">  
            <h2 title="abc">  
                Hello</h2>  
        </li>  
        <li title="abc2">  
            <input type="checkbox" checked="checked" />  
            <input type="checkbox" />  
            <input type="checkbox" />  
        </li>  
        <li title="abc3"></li>  
        <li title="abc4">  
            <ul>  
                <li title="41abc">  
                    <input type="text" readonly="true" />  
                    <input type="text" />  
                </li>  
                <li title="42abc">  
                    <input type="button" value="disabled" disabled="disabled" />  
                </li>  
                <li title="43abc4"></li>  
                <li title="44abc4">  
                    <input type="radio" checked="checked" />  
                    <input type="radio" />  
                    <input type="radio" checked="checked" />  
                </li>  
            </ul>  
        </li>  
        <li title="abc5"></li>  
        <li title="abc6"></li>  
        <li title="abc7"></li>  
        <li title="abc8"><a href="#">go</a></li>  
        <li title="abc9"></li>  
    </ol>  
    <p>  
        text</p>  
<a href="http://hovertree.com/">何问起</a>
</body>

添加一个简单的样式

<style>  
    .box  
    {  
        background-color: Red;  
    }  
</style>  
<!-- hovertree.com -->

加一个jQuery的脚本

然后就是我们的测试代码了

<script type="text/javascript">  
  
    var tip = ["指定元素名称", "属性中包含", "属性开始", "属性结束", "属性等于",  
            "html部分", "元素内容为空白", "锚",  
            "子元素", "兄弟元素", "第一个", "最后一个元素", "第2个", "倒数第2个",  
            "奇数", "偶数", "类型一致的奇数", "类型一致的偶数",  
            "从第3个算起，   每隔2个（包含第2个）", "只有一个子元素",  
            "可用状态", "不可用状态", "只读", "非只读", "选取状", "非选取状态", "一半状态", "不包含"  
            ];  
  
    var selectors = ["ol",  
                    "[title*=abc]", "[title^=abc]", "[title$=abc]", "[title=abc]",  
                    ":root",  
                    ":empty",  
                    ":target",  
                    "ol li",  
                    "ol~p",  
                    "ol li:first-child", "ol li:last-child", "ol li:nth-child(2)", "ol li:nth-last-child(2)",  
                    "ol li:nth-child(odd)", "ol li:nth-child(even)", "ol li:nth-of-type(odd)", "ol li:nth-of-type(even)",  
                    "li:nth-child(2n+3)",  
                    "ol li:only-child",  
                    ":enabled", ":disabled", ":read-only", ":read-write",  
                    ":default", ":checked", ":indeterminate",  
                    "ol li:not(:first-child)"  
                    ];  
  
  
    $(  
    function() {  
        $(":button").click(  
        function() {  
            selectors.forEach(  
            function(item, index) {  
                //把上次有box样式的元素清空下  
                Array.prototype.slice.call(document.querySelectorAll(".box")).forEach(  
                function(e, i) {  
                    e.className = "";  
                }  
                );  
                //本次匹配的元素加入样式   hovertree.com
                Array.prototype.slice.call(document.querySelectorAll(item)).forEach(  
                function(e, i) {  
                    e.className = "box";  
                }  
                );  
                $("span:eq(0)").html(item);  
                $("span:eq(1)").html(tip[index]);  
                alert("next");  
            }  
            );  
        }  
        );  
    }  
    );  
</script>