JS Line of code

$$ (' * ')//$$ functions can only be used in the Console debugging tool

Document.queryselectorall (' * ')//node list for all elements (NodeList)

Ex

var a = $$ (' a ');

var AA = Document.queryselectorall (' a ');

Console.log (a.length);

Console.log (aa.length);

Document.all can also select elements and be compatible with all major browsers.

$$ and Document.queryselectorall are equivalent

Note * Addy Osmani, a Google Chrome developer, developed a string resolution template a few days ago and is immediately accepted by the Io.js, which is compatible with the latest ES6 standards .

[].foreach.call ($$ ("*"), function (a) {

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

})

Try to run in your browser console (F12), you will find the page is highlighted by different color blocks, this method is very simple, but you write your own can produce a lot of code, let us study how it is implemented.

Select all elements on a page

We first need to select all the elements on the page. Addy uses the $$ function that can be used only in the Console debugging tool, you can enter $$ (' a ') in the console and try it yourself. It returns all anchor (link) elements of the current page.

$$ and Document.queryselectorall are equivalent. So $$ (' * ') is equivalent to Document.queryselectorall (' * '), and if you are interested, you can look at the history of $$ and the selectors .

For me, the use of $$ has made me learn a lot. But there is a lot of knowledge about selecting all the elements on the page. Mathias Bynens in the comments that document.all can also choose elements, and compatible with all major browsers.

Iterate through all the elements

Now that we have a node list of all the elements (NodeList), now we want to traverse them and add a colored border to them. Let's see what we can find in this line of code:

[].foreach.call ($$ (' * '), function (Element) {/* and the modification code here */});

NodeList looks like an array, you can use the brackets to access their nodes, and you can also know how many elements it has through the length property. However, it does not implement all the interfaces of the array, so use $$ (' * '). ForEach returns an error, in the JavaScript world, there is a bunch of objects that look like an array but are not actually. such as the arguments object in function. Therefore, it is very useful to apply the array method on them by using call and apply. I've written an article before to parse their usage, here's an example

function say (name) {

Console.log (this + ' + name);

}

Say.call (' Hola ', ' Mike ');

Print out ' Hola Mike '

The previous line of code uses [].foreach.call instead of Array.prototype.forEach.call to reduce the amount of code written (another interesting place), and if $$ (' * ') is returned as an array, it is associated with $$ (' * '). foreach is equivalent.

If you look at the comment, someone else uses the for (i=0; a=$$ (' * ');) make the code shorter, but it injects variables into the global object.

You can take the Var statement, as

For (Var i=0,b=document.queryselectorall (' * '); a=b[i++];) {/* Your code here * *}

Where I and B will only be declared in the context of the console.

Change the color of an element

Let the element have a nice border, this line of code uses the CSS outline property. One thing you might not know, in a CSS-rendered box model,outline does not change the position of the element and its layout . So this is much better than using the border property, so this part is actually not difficult to understand

A.style.outline= "1px solid #" + Color

How to define a color value is actually more interesting.

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

I don't know much about bit arithmetic, so I like this paragraph best.

What we want to construct is actually a 16 binary color value, like white ffffff, blue 0000FF, etc.

First we learned that you can use the ToString method of the number type to convert from decimal to 16 binary.

In fact, you can use it for arbitrary conversions.

(+). toString (); "30"

(+). toString (10); "30"

(+). toString (16); "1e" 16 binary

(+). toString (2); "11110" binary

(+). toString (36); "U" 36 is the maximum allowable binary

So the FFFFFF in the 16 binary is actually parseint ("FFFFFF", 16) = = 16777215,16777215 is the value of 2^24-1

So the left shift operates with a random number math.random () * (1<<24) to get a value between 0 and 16777216

But not enough, Math.random returns a floating-point number, we only need the whole number of parts, where the "~" operator (bitwise inverse) is used.

This line of code does not care about positive and negative values. So we can get the whole number of parts by two times, we can also treat ~ ~ as parseint shorthand:

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

If you look closely at the comments you will know to use a bitwise OR "|" Operator can also get the same result.

~~a = = 0|a = = parseint (A, 10)

~~b = = 0|b = = parseint (b, 10)

~~c = = 0|c = = parseint (c, 10)

We finally get a random number between 0 and 16777216, and then we use ToString (16) to convert to 16, which is how it works.

JS Line of code