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. os & sys

    os os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相当于shell下cd os.c ...

  2. git--(3)分支 合并

    git branch test //新建分支 git branch //列出分支 git branch -r //列出远程分支 git branch -m | -M oldbranch newbran ...

  3. docker-ce-17.09 仓库的创建与使用

    docker仓库是集中存放镜像的地方,注册服务器是存放仓库的具体服务器,每个服务器上可以有多个仓库,每个仓库下面有多个镜像. 一.查找仓库中镜像 > docker search centos 二 ...

  4. NuGet打包，IIS自动发布

    NuGet学习笔记(1)——初识NuGet及快速安装使用 https://kb.cnblogs.com/page/143190/ NuGet学习笔记(2)——使用图形化界面打包自己的类库 https: ...

  5. 多线程的异常处理、线程取消、临时变量、lock

    异步多线程的异常,抓不到,因为是在子线程执行. #region 多线程的异常处理.线程取消.临时变量.lock { try { List<Task> list = new List< ...

  6. ubuntu远程桌面、VNC（转载）

    VNC 远程桌面 配置/使用 for xfce 本贴主要目的为说明如何在windows系统下远程控制xfce桌面 Ubuntu 的默认GNOME桌面可以在系统设置中直接打开远程桌面,然后用Window ...

  7. Oracle性能优化2- 依据场景选择技术

    1.索引的坏处 索引可以加快查询效率,但是使用不当,会造成插入性能很低 drop table test1 purge; drop table test2 purge; drop table test3 ...

  8. mybatis入门--初识mybatis

    初识mybatis 今天,一起来说说mybits这个框架吧.这是一个持久层的框架.之前叫做ibatis.所以,在它的代码中出现ibatis这个词的时候,不要感到惊讶.不是写错了,它确实就是这个样子的. ...

  9. C++中的getline（）

    总结: 尽量使用全局函数string类中的getline(),其读入的第二个参数为string类型,不设置默认是遇到回车停止读入操作 cin.getline是针对数组字符串的,以指定的地址为存放第一个 ...

  10. 一个非常有意思的蜜罐T-Pot 16.10

    In March 2016 we released T-Pot 16.03 and the positive feedback encouraged us to continue developmen ...