首先：本人菜鳥一枚，夢想着進階高級前端工程師，並為此而努力奮斗（哈哈哈，這里純屬搞笑）
引子：
昨天看了一個百度架構師講的一個公開課，里面提到了三個問題，最基礎的考驗你js基礎是否扎實的三個問題，如果你一分鍾內能夠想到方法，能夠時候寫出來，說明你的基礎還是可以的。
現在出現了各種有利於前端開發的各種框架，非常簡單，但是看過視頻之后，覺得其實最底層的也是jsvsScript，基礎最重要，如果你的基礎不扎實的話，說實話了解更多的前端框架都是空談。
分享一下三個問題：
1.統計頁面中用了多少種標簽 2.出現最多的三種元素 3.通過遞歸拿到頁面中所有的標簽元素
分享下我的答案：
1.統計頁面中用了多少種標簽
1-1：
document.querySelectorAll('*')；//獲取到頁面中所有的標簽元素
返回的數據：
這里所涉及到的其實就一個querySelectorAll()，以及*
querySelectorAll() ：方法返回文檔中匹配指定 CSS 選擇器的所有元素，返回 NodeList 對象。
其實說白了就是，使用此方法，你可以獲取到頁面中指定class類名的元素標簽集合，
ps:
你可以使用 NodeList 對象的 length 屬性來獲取匹配選擇器的元素屬性，然后你可以遍歷所有元素，從而獲取你想要的信息。
*：通配符。
或者是使用上邊提到到的 * ，獲取頁面中所有標簽元素的集合。
通過querySelectorAll()，你可以得到標簽之后對標簽進行任意蹂躪，當然也可以結合css選擇器去獲取標簽元素。
想要了解更多的可以去菜鳥教程看一下哦！
1-2:
[...document.querySelectorAll('*')].map(v=>v.tagName)；//拿到標簽元素
返回的數據：
[...document.querySelectorAll('*')]這一段代碼就是你拿到標簽元素的集合。使用map把標簽名字拿到。
map:
map() 方法返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值。
map() 方法按照原始數組元素順序依次處理元素。
這里呢我們使用map用來拿到標簽名字。
了解更多相關map方法使用，可以去菜鳥教程哦！
1-3：
new Set([...document.querySelectorAll('*')].map(v=>v.tagName)).size；//去重拿到出現了幾種標簽元素
返回的數據：
通過1-2拿到的數據，使用new Set()方法去重，並拿到標簽元素一共有多少種。
到這里就已經完成了第一問，頁面中一共使用了40種標簽元素。
2.出現最多的三種元素
2-1：
[...document.querySelectorAll('*')].map(v=>v.tagName).reduce((res,a)=>{res[a]=(res[a] || 0)+1 ; return res;},{})；
//拿到每個標簽元素出現的次數；
返回的數據：
reduce（）reduce() 方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值。
reduce() 可以作為一個高階函數，用於函數的 compose。
這里呢說白了就是拿到所有標簽名之后使用reduce（）方法，去做循環處理，res[a]=(res[a] || 0)+1；，最后得到每個標簽元素的個數。
本人理解這個方法類似於for循環，如果符合條件就++。
了解更多相關reduce方法使用，可以去菜鳥教程哦！
2-2:
Object.entries([...document.querySelectorAll('*')].map(v=>v.tagName).reduce((res,a)=>{res[a]=(res[a] || 0)+1 ; return res;},{})).sort((a,b)=>b[1]-a[1]).slice(0,3)；
//排序，拿到出現最多的前三個標簽元素
返回的數據：
這里就拿到出現最多的三個標簽元素，關於sort（）他是排序用的，相信大家都會，就不在這里多做解釋了，slice則是返回前三個，去掉slice就可以拿到所有標簽元素的排序數組了。
3.通過遞歸拿到頁面中所有的標簽元素
1 var child = document.children; 2 3 var arr = [];//用來存放獲取到的所有的標簽 4 5 function fn(obj){ 6 7 for(var i=0;i<obj.length;i++){ 8 9 if(obj[i].children){//當當前元素還存在子元素的時候,遞歸 10 11 fn(obj[i].children); 12 13 } 14 15 arr.push(obj[i]); //遍歷到的元素添加到arr這個數組中間 16 } 17 18 } 19 20 fn(child); 21 22 console.log(arr);//打印出最后獲取到的結果
返回的數據：
這里返回的數據其實和第一步是一樣的，只不過是這里使用了遞歸的方法，如果有子級標簽元素那么就一直調用自己。
同樣的接下來你也可以用拿到的arr進行，去重，排序，等等一系列操作。document.children
children() 方法返回返回被選元素的所有直接子元素。更多關於children()的使用方法可以去W3schol了解哦！
到這里上邊提到的三個方法就搞定了，其實這就是最基本的方法，所以基礎很重要，基礎很重要，基礎很重要！！！