选取页面上的所有元素

原文出处：伯乐在线

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

这行代码获取了页面中所有元素，然后给它们加上1px，颜色随机的边框

1. 选取一个页面上所有的元素

 $$ 函数是现代浏览器命令行的API的一部分，它等同于使用 document.querySelectorAll 方法。可以将一个CSS选择器作为参数传入 document.querySelectorAll 去选取当前页面的元素。所以如果想在浏览器的控制台以外使用那个单行代码，可以用 document.querySelectorAll('*') 来替代 $$('*') 

单行代码用 [].forEach.call 来替代 Array.prototype.forEach.call 。通过Array对象 [] 去调用Array的函数这样的方式，节省了一些字节。这相当于在 $$('*').forEach 中，把 $$('*') 当成一个Array来使用。

2. 给元素上色

为了使这些元素都有漂亮的边框，代码使用了CSS的 outline 属性。显示的边框是在CSS区块模型外的，它并不对元素本身在布局中的大小和位置产生任何影响，因此该属性非常适合用来实现当前的需求。 它的语法就像border的一样：

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

3. 定义颜色的方式

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

因为 Math.random 返回的值是浮点数，而颜色只需要整数部分。这里使用了波浪符号（ ~）去实现。波浪符号用于对一个变量按位取反(作用可以记为把数字取负然后减一)。代码重点不在于按位取反，而在于利用位操作符会丢弃浮点数中的小数部分的特性，因此连续两次按位取反是一个替代 parseInt 的便捷方法：

var a = 12.34, // ~~a = 12
b = -1231.8754, // ~~b = -1231
c = 3213.000001; // ~~c = 3213

~~a == parseInt(a, 10); // true
~~b == parseInt(b, 10); // true
~~c == parseInt(c, 10); // true

 

转载于:https://www.cnblogs.com/Java-Script/p/11090663.html