HTML5的document.querySelectorAll使用教程

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

曾几何时，jQuery一度是我们使用率最高的第三方框架了。人们和犯了病一样的，任何项目，不管大小全部都是首先引入jQuery。

这样的怪现象在今后可能会逐渐减少，w3c正在努力人让门减少对jQuery的依赖。因此在HTML5诞生依赖，类似jQuery一样的犀利的查询遍历元素的方式便被推出了。

HTML5不仅仅是引入了一些标签，还有一些新的JavaScript api，其中就包括document.querySelectorAll。本文就来简单的说下document.querySelectorAll的用法。

在HTML5之前，通常我们只能使用下面4个JavaScript的方法查找元素：

• document.getElementById
• document.getElementsByClass
• document.getElementsByName
• document.getElementsByTagName

HTML5又在上面的基础上推出了两个新的方法：

• document.querySelector
• document.querySelectorAll

现在我们就可以不使用jQuery，但是还可以继续使用$美元符号来操作DOM。下面我就对document.querySelectorAll进行一下封装。

var $ = document.querySelectorAll.bind(document);
//然后我们选择dom时，可以进行下面的操作
console.debug($('body'));

有网友发现为何不直接使用var $ = document.querySelectorAll;呢？

直接使用会报错，报错原因是 querySelectorAll 所需的执行上下文必需是 document，而我们赋值到 $ 调用后上下文变成了全局 window。

每个方法都可以进行封装，如下：

var query = document.querySelector.bind(document);
var queryAll = document.querySelectorAll.bind(document);
var fromId = document.getElementById.bind(document);
var fromClass = document.getElementsByClassName.bind(document);
var fromTag = document.getElementsByTagName.bind(document);

上面这些获得的都不是数组，都是单个元素节点，如果想返回一个Node List，则需要按下面进行扩展。

Array.prototype.map.call(document.querySelectorAll('button'),
	function(element,index){
		element.onclick = function(){
		}
});

以上就是关于document.querySelectorAll的一些使用总结，欢迎大家留言交流！

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » HTML5的document.querySelectorAll使用教程