从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 src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js" type="text/javascript"></script>

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

<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>

我们准备了两个数组，一个存放选择器，一个存放选择器的说明。对selectors数组多forEach便利，根据选择器对元素进行添加样式，以可以看到样式结果。

需要说明下的是

document.querySelectorAll(".box")得到的不是数组，是nodelist，虽然可以类似数组的for，但真的不是数组，不能直接对其使用数组的方法forEach，如果我们需要转换为数组，我们可以用Array.prototype.slice.call来辅助就可以了。

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

新增的querySelector、querySelectorAll测试的更多相关文章

  1. HTML5中DOM元素的querySelector/querySelectorAll的工作机制

    在HTML5中,提供了强大的DOM元素选择API querySelector/querySelectorAll,允许使用JavaScript代码来完成类似CSS选择器的DOM元素选择功能.通常情况下, ...

  2. javascript DOM操作之 querySelector,querySelectorAll

    javascript DOM操作之 querySelector,querySelectorAll

  3. 两款JSON类库Jackson与JSON-lib的性能对比(新增第三款测试)

    本篇文章主要介绍了"两款JSON类库Jackson与JSON-lib的性能对比(新增第三款测试)",主要涉及到两款JSON类库Jackson与JSON-lib的性能对比(新增第三款 ...

  4. html5 新选择器 querySelector querySelectorAll

    querySelector 返回满足条件的单个元素 使用实例 HTML <div id="main">主体布局</div> JS var main =doc ...

  5. Fundebug前端JavaScript插件更新至1.6.0，新增test()方法用于测试

    摘要: 1.6.0新增fundebug.test()方法用于测试,请大家及时更新. 默认情况下,Fundebug 插件能够自动捕获未处理的错误(uncaught error).另外,开发者也可以通过使 ...

  6. CSS选择器比较：queryselector queryselectorall

    官网解释: querySelector() and querySelectorAll() are two JavaScript functions very useful when working w ...

  7. querySelector/querySelectorAll

    querySelector获取页面I属性D为test的元素: document.getElementById("test"); //or document.querySelecto ...

  8. （getElementBy**）与 querySelector(querySelectorAll) 的区别

    1. 通过类似于 document.getElementByTagName('div') 这种方式获取到的类数组,无法通过 forEach 进行遍历(可以通过for循环):而通过document.qu ...

  9. 重要选择器querySelector和querySelectorAll

    他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.Opera. queryS ...

随机推荐

  1. 【css】ie6 和 ie7 下 position 与 overflow 的问题

    前几天做的项目中碰到这样一个问题,在 ie6 和 ie7 下,给父元素设置 overflow:hidden 不起作用无法隐藏,后来发现是子元素中有设置 position:relative,如果子元素删 ...

  2. 我的常用mixin 之 lines

    /** * 最多显示 $lineCount 行 * lines * * example: * @include lines; * @include lines(3); */ @mixin lines( ...

  3. TortoiseSVN and TortoiseGit 版本控制图标不见了

    突然有一天,代码文件夹上的版本控制图标不见了. 注册表中,将文件夹名重命名,让版本控制的靠前,Computer \ HKEY_LOCAL_MACHINE \ SOFTWARE \ Microsoft ...

  4. 【C#|.NET】从细节出发（三） 逻辑层事务和page object模式

    一. 业务逻辑层的事务问题 如果你的程序分层清晰并且系统禁用复杂存储过程,那么在DA中的职责比较单一.程序的逻辑通过BLL调用各种不同模块的DA来实现数据操作.如果当需要不同模块在一个事务的时候,问题 ...

  5. CSS基础（三）：选择器

    常用选择器 元素选择器,即html标记如div,ul,li,p,h1~h6,table等. p { font-size:14px; } h1 { color:#F00; } 复合选择器, 由两个选择器 ...

  6. 【译文】 C#面向对象的基本概念 (Basic C# OOP Concept) 第一部分（类，对象，变量，方法，访问修饰符）

    译文出处:http://www.codeproject.com/Articles/838365/Basic-Csharp-OOP-Concept 相关文档:http://files.cnblogs.c ...

  7. php网页切图/js切图

    PhantomJS抓取网站页面信息以及网站截图 http://phantomjs.org/download.html PHP imagegrabscreen和imagegrabwindow(截取网站缩 ...

  8. Android Launcher 研究学习

    Launcher是系统启动后第一个启动的程序,是其它应用程序的入口,也就是我们的手机程序的桌面程序; 一.Launcher的定义及构成: <1>通过查看官方提供的Launcher源码可以知 ...

  9. 【转载】linux内核启动android文件系统过程分析

    主要介绍linux 内核启动过程以及挂载android 根文件系统的过程,以及介绍android 源代码中文件系统部分的浅析. 主要源代码目录介绍Makefile (全局的Makefile)bioni ...

  10. 【百度地图学习-一】初始化以及TextOverlay

    一.百度地图的初始化 主要用到三个类: 1.BMapManager:使用地图sdk前需先初始化BMapManager.BMapManager是全局的,可为多个MapView共用,它需要地图模块创建前创 ...