First of all: I am a novice, dreaming into advanced front-end engineers, and to that end and work hard (ha ha ha, this is purely funny)
Introduction:
Yesterday saw a Baidu architect of a public speaking class, which referred to the three issues, the most basic test of your js basis whether a solid three questions, if you can think of methods within a minute, can write when you explain the foundation is still possible.
Now there have been a variety of frameworks in favor of front-end development, it is very simple, but after watching the video, feel that the bottom is jsvsScript, the foundation of the most important, if you are not a solid foundation, then, to tell the truth for more front-end framework are empty.
Share with you three questions:
1 . How many statistics page with label 2 . Most frequent three elements 3 . Get all the tags elements in the page by recursively
Share my answer:
1 . How many statistics page with label
1-1:
document.querySelectorAll ( '*'); // get all of the tags into the page elements
The data returned:
Here in fact it involved a querySelectorAll () , and *
querySelectorAll (): method returns all elements in the document that match the specified CSS selector, returned NodeList object.
In fact, it means that using this method, you can get to the page with the class name of the class element tag collection,
ps:
You can use NodeList object length property to get a matching selector element attributes, then you can traverse all the elements to get the information you want.
* : Tsuhaifu.
Or * use the upper mentioned to obtain a collection of all label elements of the page.
By () querySelectorAll , then you can get any label to label torn, of course, also be combined with css selectors to acquire the label elements.
To learn more you can go to rookie tutorial to look at Oh!
1-2:
[... document.querySelectorAll ( '*')] Map (V => v.tagName);. // get the label elements
The data returned:
[... ( '*') document.querySelectorAll] This piece of code that you get the tag collection of elements. Use the map to get a name tag.
map:
map () method returns a new array, the array element calls a function of the value of the original processing array elements.
map () method in the original order of the processing elements in the array elements.
Here we use it to get a map tag name.
Learn more map method to use, you can go to the rookie tutorial oh!
1-3：
new new the Set ([... document.querySelectorAll ( '*')] Map (V => v.tagName).) size;. // deduplication tag element to get there are several
The data returned:
By 1-2 to get the data, using the new Set () method to weight, and get a label element total number of species.
Here it has completed the first question, the page used a total of 40 kinds of label elements.
2. The most frequent three elements
2-1:
[... document.querySelectorAll ( '*') ]. map (v => v.tagName) .reduce ((res, a) => {res [a] = (res [a] || 0) +1 ; return RES;}, {});
// get the number of times each tag element appears;
The data returned:
reduce（）reduce () method takes a function as an accumulator, each value in the array (left to right) started to shrink, as a final calculated value.
reduce () can be used as a higher-order function, a function for compose.
After using it to say here is to get all white tag name reduce () method , do loop processing, RES [A] = (RES [A] || 0) + 1'd ;, to give finally the number of each tag element.
I understand that this method is similar to the for loop, if eligible to ++.
Reduce the use of methods to learn more, you can go to rookie tutorial oh!
2-2:
Object.entries ([... document.querySelectorAll ( '* ')]. Map (v => v.tagName) .reduce ((res, a) => {res [a] = (res [a] || 0) + 1'd; return RES;..}, {})) Sort ((A, B) => B [. 1] -a [. 1]) Slice (0,3 );
// sort, appear to get up the first three elements label
The data returned:
Here you get most of the three elements of the label appears on sort () he is a sort of, I believe we will, do not here to explain, slice is a return to the previous three, you can get a slice remove all tags Sort the elements in the array.
3. By recursively get all the tags elements in the page
. 1 var Child = document.children; 2 . 3 var ARR = []; // All the tags used to store acquired . 4 . 5 function Fn (obj) { . 6 . 7 for ( var I = 0; I <obj.length; ++ I ) { . 8 . 9 iF (obj [I] .children) { // when this element there are sub-elements, recursive 10 . 11 Fn (obj [I] .children); 12 is 13 is } 14 15 arr.push (obj [I]); // traverse to the intermediate element added to the array arr 16 } . 17 18 is } 19 20 is Fn (Child); 21 is 22 is the console.log (ARR); // print out the final result obtained
The data returned:
Here the data returned and in fact the first step is the same, but the method used here is recursive, if there are children label elements then it has been calling himself.
The same then you can also use to get arr, deduplication, sorting, and so on a series of operations.document.children
Children () method returns returns all direct child elements of the selected element.More about the children () method can use to W3schol understand Oh!
Here are three ways to get on top mentioned, in fact, this is the most basic way, so the foundation is very important, very important foundation, the foundation is very important! ! !