正確的縮寫document。querySelector

北京的夕陽，伴隨淡淡的霾殤。從寫字樓望去，光線是那麼昏黃。沒有孤雁，也沒有霞光，遙想當年，仍是 jQuery 獨霸一方。那時的咱們，寫程序都習慣了使用 $，至少在對美圓符號的喜好上，與 PHP 達成了一致。

固然，我並不討論語言，我只說前端。

在 React 大行其道的現在，不多再看到 jQuery 的身影，是它離開了咱們嗎，仍是咱們選擇了不挽留。總之，咱們返璞歸真，從新寫起了原生的 JavaScript，這無疑是原教主義者們的勝利而且值得慶祝的時代。

使用 jQuery，對於 DOM 操做絕不費力。沒了 jQuery，好多小夥伴像斷臂楊過，生活只能靠姑姑處理。倒不是說原生不能處理，只是方法很繁瑣：

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

方法都很全，像牙科醫生的工具包。
好在後來又加上了類 jQuery 的選擇方式，

• document.querySelector
• document.querySelectorAll

那這樣呢咱們又能愉快地使用單一的方法進行多種類型的 DOM 選擇了。

即便這樣，仍是給咱們留下了一些不爽，那就是名字太長。你們應該都知道電影裏反派的統一死法吧————死於話多。因此本着能省則省，能少敲幾個字母就毫不多敲的原則，咱們非常須要對這些方法進行一次包裝，或者說取個別名。對，最好就用熟悉的 $ 。

因而咱們說幹就幹，在不到四分之一柱香的時間，咱們擼出了以下代碼：

var $ = document.querySelectorAll;

以及測試代碼：

console.debug($('body'));

經過只有少數人才知道的快捷鍵組合 ⌘+⌥+j，咱們嫺熟地喚出了瀏覽器控制檯進行測試。

可是測試以後，咱們開始懷疑人生。這即是本文存在的意義。它幫妳撥開雲霧見日升，擁有再也不懷疑的人生。

這裏報錯的緣由是 querySelectorAll 所需的執行上下文必需是 document，而咱們賦值到 $ 調用後上下文變成了全局 window。

明白了這個道理後，咱們再花不到四分之一柱香的時間，就改寫了以前的版本，釋出了正確的版本，這個版本里面，咱們用正確的姿式去 alias。

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

而後咱們再測試，原本此次測試是沒有必要的，至少應該像一個信心滿滿的程序員那樣去喝杯咖啡了。

對於 querSelector 同理，它的上下文也是 document。

爲了使用方便，咱們能夠將其餘一系列的 DOM 選擇方法都給上簡寫。

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 節點，要麼是 NodeList 而 NodeLis 是類數組的對象，但並非真正的數組，因此拿到以後不能直接使用 map,forEach 等方法。

正確的操做姿式應該是：

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

相關連接

• https://stackoverflow.com/questions/13383886/making-a-short-alias-for-document-queryselectorall