HTML5的document.querySelectorAll使用教程

HTML5 herman 730浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog,发送下载链接帮助你免费下载!
本博客日IP超过1800,PV 2600 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog,之前的微信号好友位已满,备注:返现
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领

曾几何时,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;呢?

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)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847(已满),QQ3群:187424846(已满)。QQ群进群密码:xttblog,想加微信群的朋友,之前的微信号好友已满,请加博主新的微信号:xttblog,备注:“xttblog”,添加博主微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

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