如何简写出 document.querySelectorAll?

看了一篇风趣幽默的文章，简单记录一下~

1.原生DOM选择器

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

写出来我都感觉麻烦了~接下来看看jQuery的语法糖

2.jQuery封装的DOM选择器

• document.querySelector
• document.querySelectorAll

但是，名字太长了，就像电影里面的反派台词一样~

var $ = document.querySelectorAll

这还像个样，测试console.debug($("body"));

报错~~~，为啥呢？？？不要忽视 执行上下文 ！！！

分析一波：querySelectorAll 所需的执行上下文必需是 document，而我们赋值到 $ 调用后上下文变成了全局 window。

好说，继续~~

var $ = document.querySelectorAll.bind(document);

全都给改了

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);

注意，这些方法的返回值 nodelist 并不是数组，只是类数组。不能使用数据方法 map forEach 等

how to do ? ? ?

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

3.闲聊

Vue、 React 大行其道，平分天下，还有多少人还在坚持原生？

扫描二维码关注公众号，回复： 12403754 查看本文章

我不是原教义主义者，但是我们应该经常回顾一下源头吧！！！