[].forEach.call($$("*"),function(a){
 a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

• 選擇頁(yè)面中所有的元素
  我們需要做的第一件事情是獲取頁(yè)面中所有的元素，在上面的代碼中，Addy使用了一個(gè)Chrome瀏覽器中特有的函數(shù)$$。你可以在你的Chrome瀏覽器控制臺(tái)中輸入$$('a')，然后你就能得到一個(gè)當(dāng)前頁(yè)面中所有錨元素的列表。

$$函數(shù)是許多現(xiàn)代瀏覽器命令行API中的一個(gè)部分，它等價(jià)于document.querySelectorAll,你可以將一個(gè)CSS選擇器作為這個(gè)函數(shù)的參數(shù)，然后你就能夠獲得當(dāng)前頁(yè)面中所有匹配這個(gè)CSS選擇器的元素列表。如果你在瀏覽器控制臺(tái)以外的地方，你可以使用document.querySelectorAll('')來(lái)代替$$('')。更多關(guān)于$$函數(shù)的詳細(xì)內(nèi)容可以查看Chrome開發(fā)者工具的文檔。

當(dāng)然，除了使用$$函數(shù)之外，我們還有一種更簡(jiǎn)單的方法，document.all，雖然這并不是一種很規(guī)范的使用方法，但是它幾乎在每一個(gè)瀏覽器中都能運(yùn)行成功。

• 迭代所有的元素
  經(jīng)過(guò)第一步，我們已經(jīng)獲得了頁(yè)面內(nèi)所有的元素，現(xiàn)在我們想做的事情是遍歷每一個(gè)元素，然后為它們添加一個(gè)彩色邊邊框。但是上面的代碼究竟是怎么一回事呢？

    [].forEach.call( $$('*'), function( element ) { /* 在這里修改顏色 */ });

首先，我們通過(guò)選擇器獲得的列表是一個(gè)NodeLists對(duì)象，它和javascript中的數(shù)組有點(diǎn)像，你可以使用方括號(hào)來(lái)獲取其中的節(jié)點(diǎn)，你也可以檢查它其中包含多少個(gè)元素，但是它并沒(méi)有實(shí)現(xiàn)數(shù)組包含的所有方法，因此我們并不能使用$$('*').forEach()來(lái)進(jìn)行迭代。在javascript中，有好幾個(gè)類似于數(shù)組但是并不是數(shù)組的對(duì)象，除了前面的NodeLists，還有函數(shù)的參數(shù)集合arguments，在這里我們可以使用call或apply函數(shù)將函數(shù)的方法運(yùn)用到這些對(duì)象上。

• 為元素添加顏色
  為了讓元素都有一個(gè)漂亮的邊框，我們?cè)谏厦娴拇a中使用了CSS屬性outline。outline屬性位于CSS盒模型之外，因此它并不影響元素的屬性或者元素在布局中的位置，這對(duì)于我們來(lái)說(shuō)非常有用。這個(gè)屬性和修改border屬性非常類似，因此下面的代碼應(yīng)該不會(huì)很難理解：

   a.style.outline="1px solid #" + color
  

真正有趣的地方在于定義顏色部分：

  ~~(Math.random()*(1<<24))).toString(16)

更多參考 來(lái)自http://sentsin.com/web/881.html