• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

HTML5的document.querySelectorAll使用教程

JavaScript web前端中文站 2年前 (2017-08-17) 897次浏览 已收录 0个评论

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

更多精彩内容请看 web 前端中文站
http://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 又在上面的基础上推出了两个新的方法:

现在我们就可以不使用 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 的一些使用总结,欢迎大家留言交流!

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


web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:HTML5 的 document.querySelectorAll 使用教程
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址