HTML5的document.querySelectorAll使用教程

曾几何时，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的一些使用总结，欢迎大家留言交流！

： » HTML5的document.querySelectorAll使用教程