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. JAVA HW2

    MODEL //yuec2 Yue Cheng package hw2; import java.io.File; import java.io.FileNotFoundException; impo ...

  2. [leetcode]791. Custom Sort String自定义排序字符串

    S and T are strings composed of lowercase letters. In S, no letter occurs more than once. S was sort ...

  3. Java遍历文件夹下的所以文件

    利用Java递归遍历文件夹下的所以文件,然后对文件进行其他的操作.如:对文件进行重命名,对某一类文件进行重编码.可以对某一工程下的全部.java文件进行转码成utf-8等 代码如下,这里只对文件进行重 ...

  4. OCSP

    一.简介   二.协议   三.其他 1)OCSP装订 https://zh.wikipedia.org/wiki/OCSP%E8%A3%85%E8%AE%A2

  5. PAT 1046 划拳(15)（代码）

    1046 划拳(15)(15 分) 划拳是古老中国酒文化的一个有趣的组成部分.酒桌上两人划拳的方法为:每人口中喊出一个数字,同时用手比划出一个数字.如果谁比划出的数字正好等于两人喊出的数字之和,谁就赢 ...

  6. hdu (欧拉函数+容斥原理) GCD

    题目链接http://acm.hdu.edu.cn/showproblem.php?pid=1695 看了别人的方法才会做 参考博客http://blog.csdn.net/shiren_Bod/ar ...

  7. hdu 1175(BFS&DFS) 连连看

    题目在这里:http://acm.hdu.edu.cn/showproblem.php?pid=1175 大家都很熟悉的连连看,原理基本就是这个,典型的搜索.这里用的是广搜.深搜的在下面 与普通的搜索 ...

  8. Startup.国外新锐公司及其技术Blog

    国外技术公司Tech/Engineering Blog 1. vimeo https://coderwall.com/team/vimeo http://blog.assembly.com/ 2. l ...

  9. C#泛型的学习

    编码: class Program { static void Main(string[] args) { ; Test<int> test1 = new Test<int>( ...

  10. JoyOI1035 棋盘覆盖

    原题链接 对棋盘染色,坐标和为奇数的染黑,偶数为白.这时会发现对于相同颜色的格子,是无法放置骨牌的,这样我们就将所有格子分成两类,然后根据能否放置骨牌连边,最后就是求二分图最大匹配了. 这里我是用的匈 ...