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. tomcat启动闪退之内存不足及显著优化

    增大内存: 打开catalina.bat,@echo off回车输入  set JAVA_OPTS=-server -Xms256m -Xmx512m -XX:PermSize=128M -XX:Ma ...

  2. redis创建集群——[ERR] Sorry, can't connect to node 192.168.X.X

    创建集群或者连接时会出现错误:只能用127.0.0.1创建 这是需要修改redis.conf 把bind注释掉 protected-mode no 有些旧版本注释requirepass 技术交流群:8 ...

  3. Liunx read

    read 命令从标准输入中读取一行,并把输入行的每个字段的值指定给 shell 变量 1)read后面的变量var可以只有一个,也可以有多个,这时如果输入多个数据,则第一个数据给第一个变量,第二个数据 ...

  4. Hyperscan与Snort的集成方案

    概况 Hyperscan作为一款高性能的正则表达式匹配库,非常适用于部署在诸如DPI/IPS/IDS/NGFW等网络解决方案中.Snort (https://www.snort.org) 是目前应用最 ...

  5. iOS.Operation-on-ZipFile

    Operation on ZipFile Reference 在Mac OS X和iOS中操作.zip文件(例如创建zip文件, 从zip文件中抽取数据): 1. http://stackoverfl ...

  6. javascript 高级程序设计 七

    引言:好几天没有写随笔了,项目有点紧,恰好今天项目遇到了比较大阻塞,就只好来写一篇随笔来压压惊. 1.Date类型 创建一个新的Date:(除了new Date()外) var someDate = ...

  7. javascript 高级程序设计 四

    新的一天开始,让我们伴随者轻快的心情,开始今天的笔记 1.操作符: (1): *./.-在ECMAScript中操作的时候,如果遇到有一个操作值不是数值型(Number),那么就会在后台调用numbe ...

  8. Linux快速安装apache+mysql+php环境

    yum -y install httpd mysql mysql-server php php-mysql postgresql postgresql-server php-postgresql ph ...

  9. day2-pycharm创建项目，driver下载和浏览器设置

    对于ie需要设置,才能使用ie做测试 火狐的使用不能超过43版本,ie11现在有多次弹出alert无法识别其内容的问题 https://github.com/SeleniumHQ/selenium/w ...

  10. [都是原创]Php simplexml 添加节点

    Php simplexml 添加节点 原始代码如下 //================<? //创建xml对象$xml = new SimpleXMLElement('<Messages ...