[].forEach.call($$("*"),function(a){
a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})
- 選擇頁面中所有的元素
我們需要做的第一件事情是獲取頁面中所有的元素楼镐，在上面的代碼中攀隔，Addy使用了一個Chrome瀏覽器中特有的函數(shù)$$撕贞。你可以在你的Chrome瀏覽器控制臺中輸入$$('a')唆涝，然后你就能得到一個當前頁面中所有錨元素的列表。
$$函數(shù)是許多現(xiàn)代瀏覽器命令行API中的一個部分萝究，它等價于document.querySelectorAll,你可以將一個CSS選擇器作為這個函數(shù)的參數(shù)母廷，然后你就能夠獲得當前頁面中所有匹配這個CSS選擇器的元素列表。如果你在瀏覽器控制臺以外的地方糊肤，你可以使用document.querySelectorAll('')來代替$$('')琴昆。更多關(guān)于$$函數(shù)的詳細內(nèi)容可以查看Chrome開發(fā)者工具的文檔。
當然馆揉，除了使用$$函數(shù)之外业舍，我們還有一種更簡單的方法，document.all升酣，雖然這并不是一種很規(guī)范的使用方法舷暮，但是它幾乎在每一個瀏覽器中都能運行成功。
- 迭代所有的元素
經(jīng)過第一步噩茄，我們已經(jīng)獲得了頁面內(nèi)所有的元素下面，現(xiàn)在我們想做的事情是遍歷每一個元素，然后為它們添加一個彩色邊邊框绩聘。但是上面的代碼究竟是怎么一回事呢沥割？
[].forEach.call( $$('*'), function( element ) { /* 在這里修改顏色 */ });
首先耗啦，我們通過選擇器獲得的列表是一個NodeLists對象，它和javascript中的數(shù)組有點像机杜，你可以使用方括號來獲取其中的節(jié)點帜讲，你也可以檢查它其中包含多少個元素，但是它并沒有實現(xiàn)數(shù)組包含的所有方法椒拗，因此我們并不能使用$$('*').forEach()來進行迭代似将。在javascript中，有好幾個類似于數(shù)組但是并不是數(shù)組的對象蚀苛，除了前面的NodeLists在验，還有函數(shù)的參數(shù)集合arguments，在這里我們可以使用call或apply函數(shù)將函數(shù)的方法運用到這些對象上堵未。
-
為元素添加顏色
為了讓元素都有一個漂亮的邊框腋舌，我們在上面的代碼中使用了CSS屬性outline。outline屬性位于CSS盒模型之外兴溜，因此它并不影響元素的屬性或者元素在布局中的位置侦厚，這對于我們來說非常有用。這個屬性和修改border屬性非常類似拙徽，因此下面的代碼應(yīng)該不會很難理解：a.style.outline="1px solid #" + color
真正有趣的地方在于定義顏色部分：
~~(Math.random()*(1<<24))).toString(16)
