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. MongoDB的增、删、改、查操作（五）

    按照我们关系型数据库的思想,一个服务器要想存放数据,首先要有数据库,表,字段,约束,当然了也少不了主键,外键,索引,关系等: 但是在MongoDB的世界里边,我们不用预先的去创建这些信息从而直接来使用 ...

  2. samrty模板变量操作符

    count_sentences [计算句数],示例:{$smarty.get.name|count_sentences} count_words [计算词数],示例:{$smarty.get.name ...

  3. CSS-解决苹果点击高亮、安卓select灰色背景（select下拉框在IOS中背景变黑、出现阴影问题）

    1.在苹果手机上,用点击事件后会出现一个高亮的阴影: 面对click事件的阴影,解决办法: *{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit ...

  4. css布局之头尾固定中间高度自适应

    被这个问题困扰了很久.大神别鄙视我,我是搞后台开发的....试过了很多方法,比如设定高度100%.同事用的js计算高度,我对js设置的方式一直觉得不够好,尽管设置高度为100%的方式更差,直到发现了一 ...

  5. HTML&&css练习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. gerrit管理下的git代码提交小技巧

    1.提交代码git checkout targetbranch 切换至目标分支git pull origin targetbranch 拉取目标分支最新内容git add 修改文件git commit ...

  7. 20172306《Java程序设计与数据结构》第九周学习总结

    20172306<Java程序设计>第九周学习总结 教材学习内容总结 第十一章: try-catch语句.其中还有finally语句.try是进行某些操作,catch是捕获异常,并通过某些 ...

  8. Python pip下载安装库 临时用清华镜像命令

    pip install -i https://pypi.tuna.tsinghua.edu.cn/simple C:\Users\mu\pip 新建pip.ini [global] index-url ...

  9. Sevlet处理HTML表单

    表单<form>用于搜集不同类型的用户输入.可以轻松地将一个HTML表单从一个Servlet发送到浏览器,当用户提交表单时,在表单元素中输入的值就会被当做请求参数发送到服务器. reque ...

  10. django　静态文件

    django中的静态文件,如图片,css样式jquery等等 在url最下面加上 from django.conf.urls.static import staticfrom django.conf ...