querySelectorAll()方法

调用的对象包括：Document（文档） DocumentFragment（文档片段） Element（元素）

querySelectorAll()方法接收的参数与querySelector()方法一样，也是一个css选择符，但返回的是所有匹配的元素，这个方法返回的是一个NodeList实例

返回的值是带有所有属性和方法的NodeList，而其底层实现则类似与一组元素快照，但是这个NodeList并不是动态的而是一个快照。

如果没有找到则会返回一个空的NodeList对象

要取得返回的NodeList中的每一个元素，可以使用item()方法

item方法是类数组的方法或者使用方括号语法

<body>

    <p index='klkx'>456</p>

    <a index='klkx' class='p1' id='p2'>123</a>

    <div index='klkx' class='p1' id='p2'>789</div>

    <script>

        var s1 = document.querySelector('p[index]');

        var s2 = document.querySelector('a.p1');//ID选择var s2 document.querySelector('div#p2');

        var divs = document.querySelectorAll('div[index]'),

            i,

            len=divs.length;//

        s1.style.color = 'red';

        s2.style.color = 'yellow';

        for (i=0;i<len;i++ )

        {

            divs[i].className = 'important';//divs.item(i).className = 'important';

        }

    </script>

 </body>

querySelectorAll()方法的更多相关文章

  1. querySelectorAll 方法相比 getElementsBy 系列方法区别

    最近有人问到querySelectorAll 方法相比 getElementsBy 系列方法区别,一时没想起来说些什么,今天查下文档,总结一下它们的区别,以便自己理解. 1. W3C 标准queryS ...

  2. 如何循环遍历document.querySelectorAll()方法返回的结果

    使用JavaScript的forEach方法,我们可以轻松的循环一个数组,但如果你认为document.querySelectorAll()方法返回的应该是个数组,而使用forEach循环它: /* ...

  3. querySelectorAll 方法相比 getElementsBy 系列方法有什么区别

    感谢 http://www.zhihu.com/question/24702250 简生 的回答 1. W3C 标准 querySelectorAll 属于 W3C 中的 Selectors API ...

  4. [label][转载][JavaSript]querySelectorAll 方法相比 getElementsBy 系列方法有什么区别？

     轉載出處: http://www.zhihu.com/question/24702250 querySelectorAll 相比下面这些方法有什么区别? getElementsByTagName g ...

  5. document.querySelector和querySelectorAll方法

    querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.q ...

  6. querySelector和querySelectorAll方法介绍

    module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOM ...

  7. javascript之 原生document.querySelector和querySelectorAll方法

    querySelector和querySelectorAll是W3C提供的新的查询接口,其主要特点如下: 1.querySelector只返回匹配的第一个元素,如果没有匹配项,返回null.  2.q ...

  8. IE6、IE7兼容querySelectorAll和querySelector方法-最终版本

    querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素.目前几乎主流浏 ...

  9. querySelectorAll 方法和 getElementsBy 系列方法的区别

    本文是我在知乎上的一个回答:http://www.zhihu.com/question/24702250/answer/28695133 ————— 下面是正文 ————— 1. W3C 标准quer ...

随机推荐

  1. （转）css选择器及其优先级

    文章主要介绍什么是CSS选择器,CSS选择器的分类以及CSS选择器的优先级三部分内容,希望能够帮助到正在学习CSS的童鞋,有什么不足的地方欢迎大家批评指正. 一.什么是CSS选择器? CSS选择器又被 ...

  2. Cmd下修改文件访问控制权限

    保证自己的磁盘分区格式是NTFS.FAT32是不行的. 一.Cacls.exe命令的使用 这是一个在Windows 2000/XP/Server 2003操作系统下都可以使用的命令,作用是显示或者修改 ...

  3. C# 解决SharpSvn启动窗口报错 Unable to connect to a repository at URL 'svn://....'

    在远程机打开sharpsvn客户端测试,结果报错 Svn启动窗口报错 Unable to connect to a repository at URL 'svn://...' 咋整,我在win10我的 ...

  4. 4K - 找新朋友

    新年快到了,“猪头帮协会”准备搞一个聚会,已经知道现有会员N人,把会员从1到N编号,其中会长的号码是N号,凡是和会长是老朋友的,那么该会员的号码肯定和N有大于1的公约数,否则都是新朋友,现在会长想知道 ...

  5. redis 哨兵（sentinel）

    redis哨兵 哨兵自动故障转移 自动通知应用最新master信息 无需担心,master挂了,程序不需要修改IP啥的,由哨兵自动完成 修改sentinel.conf protected-mode n ...

  6. C#委托深入学习

    一基础学习: .Net delegate类型:委托跟回调函数是很有渊源的.回调其实跟通知机制有关,考虑这样一个基本的事件序列: a对象调用了b对象的某个方法,希望b对象在其方法完成之时调用a对象的某个 ...

  7. iOS push新的调用方法

    // IOS8 新系统需要使用新的代码if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 8.0){    [[UIAppl ...

  8. Selenium+PhantomJS

    Selenium Selenium是一个Web的自动化测试工具,最初是为网站自动化测试而开发的,类型像我们玩游戏用的按键精灵,可以按指定的命令自动操作,不同是Selenium 可以直接运行在浏览器上, ...

  9. 【UI测试】－－独特性

  10. IOS初级：delegate的使用

    delegate的应用场景:view中的事件,controller做处理(如刷新view中元素等). storyboard的textfield实现点击return实现收起键盘. 首先在ViewCont ...