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