网站首页 » 记录 » Chrome 调试状态下神奇代码段

Chrome 调试状态下神奇代码段

March 21, 2018 记录
[].forEach.call($$("*"),function(a){

  a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)

})

我们首先要做的就是获取页面上的所有元素,在上面的代码中Addy使用了只能在浏览器控制台使用的函数$$。你可以自己试一试,打开你的浏览器控制台并且键入

$$('a')
,之后你就能得到一个当前页面中所有锚元素的列表。

$$函数是许多现代浏览器的命令行API的一部分,它等价于

document.querySelectorAll
,你可以使用一个CSS选择器作为这个函数的参数,之后你会获得这个页面中匹配该CSS选择器的元素列表。所以如果你想在浏览器控制台以外的地方使用$$('*')的话,可以用document.querySelectorAll('*')替换它

当然,除了$$函数之外,我们还可以使用document.all这个更简单的方法,这并不是一个标准的方法,但是几乎可以在所有的浏览器上运行。

[].forEach.call( $$('*'), function( element ) { /* And the modification code here */ });