FuDesign2008
FuDesign2008

document.querySelectorAll

Summary

Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a  NodeList .

Syntax

elementList
 = document.querySelectorAll(selectors
);

where

  • elementList   is a non-live  NodeList   of  element   objects.
  • selectors   is a string containing one or more CSS selectors separated by commas.

The returned NodeList will contain all the elements in the document that are matched by any of the specified selectors.

Example

This example returns a list of all  div   elements within the  document   with a class of either "note " or "alert ":

1 var   matches = document.querySelectorAll( "div.note, div.alert" );

Notes

Returns a non-live  NodeList   of all the matching element nodes.

Throws a  SYNTAX_ERR  exception if the specified group of selectors is invalid.

querySelectorAll()   was introduced in the WebApps API.

Browser compatibility

Browser Support Notes
Internet Explorer 8  
Firefox (Gecko) 3.5   (1.9.1)  
Opera 10  
Chrome 1  
Safari (webkit) 3.2 (525.3) webk.it/16587

Specification

  • Selectors API

See also

  • document.querySelector
  • element.querySelectorAll
  • element.querySelector
  • Code snippets for querySelector

你可能感兴趣的:(document.querySelectorAll)

  • vue+el-table 可输入表格使用上下键进行input框切换 以对_ vue学习记录vue.jsjavascript前端
    使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei
  • ＜el-table＞组件show-summary合计行合并方法 weixin_52137539 前端javascriptvue.js
    elementtable组件中通过show-summary生成的合并行无法通过span-method方式实现合并行;watch:{  tableData:{    immediate:true,    handler(){      setTimeout(()=>{        consttds=document.querySelectorAll('#table.el-table__footer
  • Element-plus cascader 下拉组件卡顿问题 web_wlx vue.jsjavascript前端
    版本号:“element-plus”:“^1.0.2-beta.71”,使用过程中，el-cascader三级联动时候页面会卡死代码问题原因查官方仓库后发现，原因是解决办法添加@focus回调constfocusChange=()=>{//解决ElementUI的页面卡顿的bugconst$el=document.querySelectorAll(".el-cascader-panel.el-ca
  • 5、tab切换案例 @zyf哈哈哈哈 前端服务器javascript
    vartitles=document.querySelectorAll("#title>li")varcontents=document.querySelectorAll("#content>li")//循环遍历标题for(vari=0;i
  • js---webAPI 婷宝_知萌 前端javascript开发语言
    01声明变量js组成：DOM:操作网页内容的,开发页面内容特效和实现用户交互BOM:DOM树：将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树文档树直观的体现了标签与标签之间的关系CSS获取元素的方法document.querySelector()//获取单个元素document.querySelectorAll()//获取多个元素，不能直接修改，需要通过遍历的方式给里面的元素做
  • 闭包 详细解释与举例2 hpasdabc javascriptjqueryajaxchromehtml5
    ---------------------------------------------------闭包详细解释与举例2------------------------------------------------------------应用循环中的异步循环绑定事件varali=document.querySelectorAll("li");for(vari=0;i作用域链//https://
  • 图片懒加载方法封装 旧时日月明
    letimgList=[...document.querySelectorAll('img')]letlength=imgList.lengthconstimgLazyLoad=function(){letcount=0return(function(){letdeleteIndexList=[]imgList.forEach((img,index)=>{letrect=img.getBoundi
  • 手写一个简易的Jquery考虑插件及扩展性 loushumei
    通过手写一个简易的DOM节点查询功能的Jquery实例，了解Jquery内部实现原理及理解Class与继承。页面DOM节点如下第一段文字1第一段文字2第一段文字3定义jquery对象classjQuery{//constructor构造器constructor(selector){constresult=document.querySelectorAll(selector)constlength=
  • 【零碎】遍历document.querySelectorAll() acsamson
    直接看代码://forEach方式document.querySelectorAll('.ele').forEach(function(){...});//空数组方式call来进行:不推荐,因为占空间[].forEach.call(elements,function(element){...});//传统方法varlen=element.length;for(i=0;i<len;++i){...}
  • 深入理解javascript类数组对象 卖菜的小白 js面试题javascript前端html5类数组
    一、什么是类数组类数组的定义只存在一条，就是存在length属性。1、类数组形式letdivs=document.querySelectorAll("div")console.log(divs.length)//9console.log(divs[0])//1console.log(divs)//NodeList(9)[div,div,div,div,div,div,div,div,div]con
  • 前端笔记（14） rtrhhthth
    代码：1.新增选择器新增选择器window.onload=function(){varoDiv=document.querySelector('#div1');alert(oDiv);//弹出[objectHTMLDivElement]，表示选择了该Div//如果要选择多个元素用querySelectorAllvaraLi=document.querySelectorAll('.listli');
  • 类数组转化为数组 王小樱
    类数组是具有length属性，但不具有数组原型上的方法。常见的类数组有arguments、DOM操作方法返回的结果。方法：//方法一：Array.fromArray.from(document.querySelectorAll('div'))//方法二：Array.prototype.slice.call()Array.prototype.slice.call(document.querySele
  • js 设置、获取、删除标签属性以及H5自定义属性 雪芽蓝域zzs JavaScriptjavascript前端
    1.设置标签属性  使用setAttribute()(‘属性名’,‘属性值’)方法可以添加、修改、删除属性。  下面的demo是为input添加、修改、删除value属性：1.1.HTML1.2.JS//添加value属性document.querySelectorAll('.input')[0].setAttribute('value',"addvalue'sattribute");//修改va
  • js伪数组转数组 润清 ES标准es6javascript
    伪数组转数组伪数组：按索引方式储存数据具有length属性letarrLike={0:‘a’,1:‘b’,2:‘c’,length:3}常见伪数组arguments、NodeListES5:functiontest(){letargs=[].slice.call(arguments)letimgs=[].slice.call(document.querySelectorAll('img'))}ES
  • 第二十五节: ES6 数组扩展 时光如剑
    1.扩展运算符扩展运算符（spread）是三个点（...）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。console.log(...[1,2,3])//123console.log(1,...[2,3,4],5)//12345[...document.querySelectorAll('div')]//[,,]该运算符将一个数组，变为参数序列。1.1扩展运算符后可以为表达式c
  • js开启和关闭样式表功能 beijixing_233
    如果传递一个数字，函数将其当做document.styleSheets数组中的一个索引，否则当css选择器：functiondisableStylesheet(s){if(typeofs==='number'){document.styleSheets[s].disabled=true;}else{varsheets=document.querySelectorAll(s);for(vari=0;
  • document-homework02 oct___越来越2
    button{border:none;outline:none;width:120px;height:30px;font:16px/30px"couriernew";color:white;background-color:red;margin:10px20px;cursor:pointer;}ABCDE//letbuttons=document.querySelectorAll('button'
  • ES6 ... 扩展运算符(对象展开符) 谢大见
    ES6的扩展运算符(对象展开符)...扩展运算符（spread）是三个点（...）。它好比rest参数的逆运算，将一个数组转为用逗号分隔的参数序列。console.log(...[1,2,3])//123console.log(1,...[2,3,4],5)//12345[...document.querySelectorAll('div')]//[,,]该运算符主要用于函数调用functionp
  • 前端页面直接导出Excel方案 m0_59324006 jsjavascript前端
    方案1纯原生js在页面实现导出.xls格式toContentPrintExcel22(e){//获取页面内容this.name=this.$t(this.selectReport.name);//打印内容部分-区分类型，利润和其他lettableHtml=document.querySelectorAll('#excelContenttable')[0].innerHTML;//创建a标签cons
  • 前端三件套搭建登录页面（HTML+CSS+JS） 詹小友 前端javascript前端html
    目录HTML+JS代码（登录页面）代码解析CSS代码注册页面HTML代码素材图片小结HTML+JS代码（登录页面）欢迎登录账 号密 码没有账号？点击注册functionf(){varflat=true;varmyUerName=document.querySelectorAll("input")[0];varmyPassWord=document.querySelectorAl
  • es6开发常用技巧 微笑的弧度_c50f
    1.如何隐藏所有指定的元素consthide=(el)=>Array.from(el).forEach(e=>(e.style.display='none'));//事例:隐藏页面上所有``元素hide(document.querySelectorALL('p'))2.如何检查元素是否具有指定的类？页面DOM里面的每个节点上都有一个$\color{#FF0000}{classList}$对象，程序
  • 滚动条滚动到底部 记录学习生活
    在table中添加行滚动条自动滚动到最后一行lettableScroll=document.querySelectorAll('.tableScroll')//获取tablethis.$nextTick(()=>{console.log(tableScroll)for(leti=0;i
  • Anime+Vue 誰在花里胡哨
    效果图：nfex.gif代码如下：importanimefrom"animejs/lib/anime.es.js";exportdefault{mounted(){letpath_one=document.querySelectorAll("#onepath");letpath_two=document.querySelectorAll("#twopath");for(leti=0;i.overa
  • 利用JavaScript实现全选复选功能 W2399755751 javascript前端开发语言
    功能实现:1.点击全选按钮全部选中,再次点击则取消全部选中2.当点满复选框时,全选框自动勾选,否则不会勾选样式截图代码如下点击全选实现全部勾选功能//1.获取大复选框constcheckAll=document.querySelector('#checkAll')//2.获取所有的小复选框constcks=document.querySelectorAll('.ck')//3.点击大复选框注册事件
  • 如何实现复选框全选功能 是阳仔啊
    全选北京上海广州深圳//获取全选复选框letckAll=document.querySelector('#ckAll')//获取全部的复选框letcks=document.querySelectorAll('.ck')//console.log(ckAll);//console.log(cks);//给全选复选框注册点击事件ckAll.onclick=function(){//Checked返回值
  • var、let 和 const的区别 布卡卡的晴空
    1.变量和常量关键词1.1let关键词有块级作用域(防止变量污染):一对大括号就是一个程序块，在大括号之中声明的变量，出了大括号就不能用了for(leti=1;ibtn1btn2btn3varbtns=document.querySelectorAll("button");//使用var声明i，则i是全局变量;循环完成后i的值为3for(vari=0;i1.3const常量一旦赋值就不能改变的量就
  • JavaScript onclick无效果的原因之一 自由如风709 javascriptvscodehtml5csscss3前端chrome
    varimg=document.querySelector('.bigimg');varimgs=document.querySelectorAll('.a');console.log(img);for(vari=0;i标签，那么imgs[i].href可能不是你想要设置为img.src的值，因为href属性通常用于指向文档，而不是图像文件。如果.a是指向图像文件的链接，那么你可能需要使用getA
  • 当前页面一键回关 大囚长 编程人生javascript前端开发语言
    CSDN博客关注页面当前页面一键回关所有fans代码f12打开控制台，输入以下代码//获取所有的button元素，根据它们的属性进行筛选varbuttons=document.querySelectorAll("button[data-v-0947769e][data-ref^='li_'][data-id][class='attention-btn']");//遍历所有的button元素，调用c
  • js循环报错：forEach is not a function 徊忆羽菲 JavascriptJqueryHtml
    js循环报错：forEachisnotafunction报错代码解决办法报错代码获取htmldom，然后遍历dom时，报错tabList.forEachisnotafunctionvartabList=document.querySelectorAll('.mui-tab-item');tabList.forEach(function(tabItem){tabItem.classList.remo
  • 将抖音视频转成MP3并下载 iimo 音视频
    这篇是在上一篇的基础上写的，这篇负责抖音作者详情页的视频转声音提取，这篇需要用到后端。本地启动后端后，在控制台输入对应代码，即可实现hover在封面上，按d一键下载音频控制台代码//获取作者的视频列表varliElements=document.querySelectorAll('ul[data-e2e="scroll-list"]li');//添加鼠标悬停事件监听器liElements.forE
  • apache ftpserver-CentOS config gengzg apache
    <server xmlns="http://mina.apache.org/ftpserver/spring/v1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=" http://mina.apache.o
  • 优化MySQL数据库性能的八种方法 AILIKES sqlmysql
    1、选取最适用的字段属性 　　MySQL可以很好的支持大数据量的存取，但是一般说来，数据库中的表越小，在它上面执行的查询也就会越快。因此，在创建表的时候，为了获得更好的 性能，我们可以将表中字段的宽度设得尽可能小。例如，在定义邮政编码这个字段时，如果将其设置为CHAR(255),显然给数据库增加了不必要的空间，甚至使用VARCHAR这种类型也是多余的，因为CHAR(6)就可以很
  • JeeSite 企业信息化快速开发平台 Kai_Ge JeeSite
    JeeSite 企业信息化快速开发平台 平台简介 JeeSite是基于多个优秀的开源项目，高度整合封装而成的高效，高性能，强安全性的开源Java EE快速开发平台。 JeeSite本身是以Spring Framework为核心容器，Spring MVC为模型视图控制器，MyBatis为数据访问层， Apache Shiro为权限授权层，Ehcahe对常用数据进行缓存，Activit为工作流
  • 通过Spring Mail Api发送邮件 120153216 邮件main
    原文地址：http://www.open-open.com/lib/view/open1346857871615.html 使用Java Mail API来发送邮件也很容易实现，但是最近公司一个同事封装的邮件API实在让我无法接受，于是便打算改用Spring Mail API来发送邮件，顺便记录下这篇文章。 【Spring Mail API】 Spring Mail API都在org.spri
  • Pysvn 程序员使用指南 2002wmj SVN
    源文件:http://ju.outofmemory.cn/entry/35762 这是一篇关于pysvn模块的指南. 完整和详细的API请参考 http://pysvn.tigris.org/docs/pysvn_prog_ref.html. pysvn是操作Subversion版本控制的Python接口模块. 这个API接口可以管理一个工作副本, 查询档案库, 和同步两个. 该
  • 在SQLSERVER中查找被阻塞和正在被阻塞的SQL 357029540 SQL Server
    SELECT  R.session_id AS BlockedSessionID ,          S.session_id AS BlockingSessionID ,          Q1.text AS Block
  • Intent 常用的用法备忘 7454103 .netandroidGoogleBlogF#
    Intent     应该算是Android中特有的东西。你可以在Intent中指定程序 要执行的动作（比如：view,edit,dial），以及程序执行到该动作时所需要的资料 。都指定好后，只要调用startActivity()，Android系统 会自动寻找最符合你指定要求的应用 程序，并执行该程序。 下面列出几种Intent 的用法 显示网页:
  • Spring定时器时间配置 adminjun spring时间配置定时器
    红圈中的值由6个数字组成，中间用空格分隔。第一个数字表示定时任务执行时间的秒，第二个数字表示分钟，第三个数字表示小时，后面三个数字表示日，月，年，< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" /> 测试的时候，由于是每天定时执行，所以后面三个数
  • POJ 2421 Constructing Roads 最小生成树 aijuans 最小生成树
    来源：http://poj.org/problem?id=2421 题意：还是给你n个点，然后求最小生成树。特殊之处在于有一些点之间已经连上了边。 思路：对于已经有边的点，特殊标记一下，加边的时候把这些边的权值赋值为0即可。这样就可以既保证这些边一定存在，又保证了所求的结果正确。 代码： #include <iostream> #include <cstdio>
  • 重构笔记——提取方法（Extract Method） ayaoxinchao java重构提炼函数局部变量提取方法
    提取方法（Extract Method）是最常用的重构手法之一。当看到一个方法过长或者方法很难让人理解其意图的时候，这时候就可以用提取方法这种重构手法。   下面是我学习这个重构手法的笔记：   提取方法看起来好像仅仅是将被提取方法中的一段代码，放到目标方法中。其实，当方法足够复杂的时候，提取方法也会变得复杂。当然，如果提取方法这种重构手法无法进行时，就可能需要选择其他
  • 为UILabel添加点击事件 bewithme UILabel
        默认情况下UILabel是不支持点击事件的，网上查了查居然没有一个是完整的答案，现在我提供一个完整的代码。   UILabel *l = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, listV.frame.size.width - 60, listV.frame.size.height)]
  • NoSQL数据库之Redis数据库管理(PHP-REDIS实例) bijian1013 redis数据库NoSQL
    一.redis.php <?php //实例化 $redis = new Redis(); //连接服务器 $redis->connect("localhost"); //授权 $redis->auth("lamplijie"); //相关操
  • SecureCRT使用备注 bingyingao secureCRT每页行数
    SecureCRT日志和卷屏行数设置 一、使用securecrt时，设置自动日志记录功能。 1、在C:\Program Files\SecureCRT\下新建一个文件夹(也就是你的CRT可执行文件的路径），命名为Logs； 2、点击Options -> Global Options -> Default Session -> Edite Default Sett
  • 【Scala九】Scala核心三：泛型 bit1129 scala
    泛型类 package spark.examples.scala.generics class GenericClass[K, V](val k: K, val v: V) { def print() { println(k + "," + v) } } object GenericClass { def main(args: Arr
  • 素数与音乐 bookjovi 素数数学haskell
        由于一直在看haskell，不可避免的接触到了很多数学知识，其中数论最多，如素数，斐波那契数列等，很多在学生时代无法理解的数学现在似乎也能领悟到那么一点。     闲暇之余，从图书馆找了<<The music of primes>>和<<世界数学通史>>读了几遍。其中素数的音乐这本书与软件界熟知的&l
  • Java-Collections Framework学习与总结-IdentityHashMap BrokenDreams Collections
            这篇总结一下java.util.IdentityHashMap。从类名上可以猜到，这个类本质应该还是一个散列表，只是前面有Identity修饰，是一种特殊的HashMap。         简单的说，IdentityHashMap和HashM
  • 读《研磨设计模式》-代码笔记-享元模式-Flyweight bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.Collection; import java.util.HashMap; import java.util.List; import java
  • PS人像润饰&调色教程集锦 cherishLC PS
      1、仿制图章沿轮廓润饰——柔化图像，凸显轮廓 http://www.howzhi.com/course/retouching/   新建一个透明图层，使用仿制图章不断Alt+鼠标左键选点，设置透明度为21%，大小为修饰区域的1/3左右（比如胳膊宽度的1/3），再沿纹理方向（比如胳膊方向）进行修饰。   所有修饰完成后，对该润饰图层添加噪声，噪声大小应该和
  • 更新多个字段的UPDATE语句 crabdave update
    更新多个字段的UPDATE语句                    update tableA a set (a.v1, a.v2, a.v3, a.v4) = --使用括号确定更新的字段范围
  • hive实例讲解实现in和not in子句 daizj hivenot inin
    本文转自：http://www.cnblogs.com/ggjucheng/archive/2013/01/03/2842855.html 当前hive不支持 in或not in 中包含查询子句的语法，所以只能通过left join实现。 假设有一个登陆表login(当天登陆记录,只有一个uid),和一个用户注册表regusers(当天注册用户，字段只有一个uid)，这两个表都包含
  • 一道24点的10+种非人类解法（2,3,10,10） dsjt 算法
    这是人类算24点的方法？！！！ 事件缘由：今天晚上突然看到一条24点状态，当时惊为天人，这NM叫人啊？以下是那条状态 朱明西 : 24点，算2 3 10 10，我LX炮狗等面对四张牌痛不欲生，结果跑跑同学扫了一眼说，算出来了，2的10次方减10的3次方。。我草这是人类的算24点啊。。 然后么。。。我就在深夜很得瑟的问室友求室友算 刚出完题，文哥的暴走之旅开始了 5秒后
  • 关于YII的菜单插件 CMenu和面包末breadcrumbs路径管理插件的一些使用问题 dcj3sjt126com yiiframework
    在使用 YIi的路径管理工具时，发现了一个问题。                    <?php         
  • 对象与关系之间的矛盾：“阻抗失配”效应[转] come_for_dream 对象
    概述   “阻抗失配”这一词组通常用来描述面向对象应用向传统的关系数据库（RDBMS）存放数据时所遇到的数据表述不一致问题。C++程序员已经被这个问题困扰了好多年，而现在的Java程序员和其它面向对象开发人员也对这个问题深感头痛。   “阻抗失配”产生的原因是因为对象模型与关系模型之间缺乏固有的亲合力。“阻抗失配”所带来的问题包括：类的层次关系必须绑定为关系模式（将对象
  • 学习编程那点事 gcq511120594 编程互联网
    一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！ 接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去
  • Reverse Linked List II hcx2013 list
    Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1->2->3->4->5->NULL, m = 2 and n = 4, return 
  • Spring4.1新特性——页面自动化测试框架Spring MVC Test HtmlUnit简介 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • Hadoop集群工具distcp liyonghui160com
        1. 环境描述 两个集群：rock 和 stone rock无kerberos权限认证，stone有要求认证。 1. 从rock复制到stone，采用hdfs Hadoop distcp -i hdfs://rock-nn:8020/user/cxz/input hdfs://stone-nn:8020/user/cxz/运行在rock端，即源端问题：报版本
  • 一个备份MySQL数据库的简单Shell脚本 pda158 mysql脚本
    　　主脚本（用于备份mysql数据库）： 　　该Shell脚本可以自动备份 数据库。只要复制粘贴本脚本到文本编辑器中，输入数据库用户名、密码以及数据库名即可。我备份数据库使用的是mysqlump 命令。后面会对每行脚本命令进行说明。 　　 1. 分别建立目录“backup”和“oldbackup” 　　#mkdir /backup 　　#mkdir /oldbackup 　
  • 300个涵盖IT各方面的免费资源（中）——设计与编码篇 shoothao IT资源图标库图片库色彩板字体
    A. 免费的设计资源 Freebbble:来自于Dribbble的免费的高质量作品。 Dribbble:Dribbble上“免费”的搜索结果——这是巨大的宝藏。 Graphic Burger:每个像素点都做得很细的绝佳的设计资源。 Pixel Buddha:免费和优质资源的专业社区。 Premium Pixels:为那些有创意的人提供免费的素材。
  • thrift总结 - 跨语言服务开发 uule thrift
    官网 官网JAVA例子 thrift入门介绍 IBM-Apache Thrift - 可伸缩的跨语言服务开发框架 Thrift入门及Java实例演示 thrift的使用介绍   RPC    POM： <dependency> <groupId>org.apache.thrift</groupId>
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他