HTML5的document.querySelectorAll使用教程

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

更多精彩内容请看 web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

这样的怪现象在今后可能会逐渐减少,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;呢?

HTML5的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的一些使用总结,欢迎大家留言交流!

【注:本文源自网络文章资源,由站长整理发布】

0
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到