单页应用中更优雅的操作dom

前言

以前的项目是jquery独行天下，但是随着单页应用的流行，很多公司放弃了jquery的使用，主要因为项目中dom操作较少，一般都是数据改变dom，但是假如项目中难免的操作一些dom的时候，我们可以完全用js的一些写法，完全没有必要小小的操作来引进一个那么庞大的jquery。 关于js替代jquery的一些函数我之前也有整理过，请看文章 jquery属性的相关js实现方法

但是话说回来了，jquery用习惯了，$()，这种选择器已经深入人心。 虽然谷歌浏览器已经支持$$("body")的写法

$$('a') 等价于 document.querySelectorAll（“a”）

$$ 目前用的人毕竟很少，后期维护等也不是很方便。

document.querySelectorAll自定义缩写

为啥我们不把 document.querySelectorAll,直接定义为$ 呢？

这样就可以像写jquey一样选择dom了？

因此我们如下写：

var $ = document.querySelectorAll;
$("body")

但是报错了！

VM343:2 Uncaught TypeError: Illegal invocation
    at <anonymous>:2:1

想了一下，原因如下：

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

因此，我们手动绑定一下：

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

这次对了

var $ = document.querySelectorAll.bind(document);
$("body")
NodeList [body.pace-done]

但是有个问题，$("body")方法返回的要么是单个 Node 节点，要么是 NodeList 而 NodeLis 是类数组的对象，但并不是真正的数组，所以拿到之后不能直接使用 map,forEach 等方法。

因此：

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

或者

[].slice.call（$('button'）


Array.from（$('button'）

类数组转为数组的方式转换一下！