單頁應用中更優雅的操作dom

摘要： 前言 以前的專案是jquery獨行天下，但是隨著單頁應用的流行，很多公司放棄了jquery的使用，主要因為專案中dom操作較少，一般都是資料改變dom，但是假如專案中難免的操作一些dom的時候，我們可以完全用js的一些寫法，完全沒有必要小小的操作來引進一個那麼龐大的jquery。 關於j...

前言

以前的專案是jquery獨行天下，但是隨著單頁應用的流行，很多公司放棄了jquery的使用，主要因為專案中dom操作較少，一般都是資料改變dom，但是假如專案中難免的操作一些dom的時候，我們可以完全用js的一些寫法，完全沒有必要小小的操作來引進一個那麼龐大的jquery。 關於js替代jquery的一些函式我之前也有整理過，請看文章ofollow,noindex" target="_blank">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'）

類陣列轉為陣列的方式轉換一下！