首先：本人菜鳥一枚，夢想著進(jìn)階高級前端工程師，并為此而努力奮斗（哈哈哈，這里純屬搞笑）

引子：

昨天看了一個百度架構(gòu)師講的一個公開課，里面提到了三個問題，最基礎(chǔ)的考驗(yàn)?zāi)鉰s基礎(chǔ)是否扎實(shí)的三個問題，如果你一分鐘內(nèi)能夠想到方法，能夠時候?qū)懗鰜?，說明你的基礎(chǔ)還是可以的。

現(xiàn)在出現(xiàn)了各種有利于前端開發(fā)的各種框架，非常簡單，但是看過視頻之后，覺得其實(shí)最底層的也是jsvsScript，基礎(chǔ)最重要，如果你的基礎(chǔ)不扎實(shí)的話，說實(shí)話了解更多的前端框架都是空談。

分享一下三個問題：

1.統(tǒng)計頁面中用了多少種標(biāo)簽

2.出現(xiàn)最多的三種元素

3.通過遞歸拿到頁面中所有的標(biāo)簽元素

分享下我的答案：

1.統(tǒng)計頁面中用了多少種標(biāo)簽

1-1：

document.querySelectorAll('*')；//獲取到頁面中所有的標(biāo)簽元素

返回的數(shù)據(jù)：

這里所涉及到的其實(shí)就一個querySelectorAll()，以及*

querySelectorAll() ：方法返回文檔中匹配指定 CSS 選擇器的所有元素，返回 NodeList 對象?！?/p>

其實(shí)說白了就是，使用此方法，你可以獲取到頁面中指定class類名的元素標(biāo)簽集合，

ps:

你可以使用 NodeList 對象的 length 屬性來獲取匹配選擇器的元素屬性，然后你可以遍歷所有元素，從而獲取你想要的信息。

*：通配符。　　

或者是使用上邊提到到的 * ，獲取頁面中所有標(biāo)簽元素的集合。

　　通過querySelectorAll()，你可以得到標(biāo)簽之后對標(biāo)簽進(jìn)行任意蹂躪，當(dāng)然也可以結(jié)合css選擇器去獲取標(biāo)簽元素。

　　想要了解更多的可以去菜鳥教程看一下哦！

　　1-2:

[...document.querySelectorAll('*')].map(v=>v.tagName)；//拿到標(biāo)簽元素

　　返回的數(shù)據(jù)：

　　　　[...document.querySelectorAll('*')]這一段代碼就是你拿到標(biāo)簽元素的集合。使用map把標(biāo)簽名字拿到。

　　　　map:　

　　　　　　map() 方法返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。

　　　　　　map() 方法按照原始數(shù)組元素順序依次處理元素。

　　　　這里呢我們使用map用來拿到標(biāo)簽名字。

了解更多相關(guān)map方法使用，可以去菜鳥教程哦！

　　1-3：

new Set([...document.querySelectorAll('*')].map(v=>v.tagName)).size；//去重拿到出現(xiàn)了幾種標(biāo)簽元素

返回的數(shù)據(jù)：

通過1-2拿到的數(shù)據(jù)，使用new Set()方法去重，并拿到標(biāo)簽元素一共有多少種。

到這里就已經(jīng)完成了第一問，頁面中一共使用了40種標(biāo)簽元素。


2.出現(xiàn)最多的三種元素

2-1：

[...document.querySelectorAll('*')].map(v=>v.tagName).reduce((res,a)=>{res[a]=(res[a] || 0) 1 ;  return res;},{})；
//拿到每個標(biāo)簽元素出現(xiàn)的次數(shù)；

返回的數(shù)據(jù)：

　　reduce（）　　　　　

　　　　　　reduce() 方法接收一個函數(shù)作為累加器，數(shù)組中的每個值（從左到右）開始縮減，最終計算為一個值。

　　　　　　reduce() 可以作為一個高階函數(shù)，用于函數(shù)的 compose。

　　　　這里呢說白了就是拿到所有標(biāo)簽名之后使用reduce（）方法，去做循環(huán)處理，res[a]=(res[a] || 0) 1；，最后得到每個標(biāo)簽元素的個數(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)最多的前三個標(biāo)簽元素

返回的數(shù)據(jù)：

 　　這里就拿到出現(xiàn)最多的三個標(biāo)簽元素，關(guān)于sort（）他是排序用的，相信大家都會，就不在這里多做解釋了，slice則是返回前三個，去掉slice就可以拿到所有標(biāo)簽元素的排序數(shù)組了。

3.通過遞歸拿到頁面中所有的標(biāo)簽元素

 1 var child = document.children;
 2 
 3 　　var arr = [];//用來存放獲取到的所有的標(biāo)簽
 4 
 5 　　function fn(obj){
 6 
 7 　　　　for(var i=0;i<obj.length;i  ){
 8 
 9 　　　　　　 if(obj[i].children){//當(dāng)當(dāng)前元素還存在子元素的時候,遞歸
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ù)其實(shí)和第一步是一樣的，只不過是這里使用了遞歸的方法，如果有子級標(biāo)簽元素那么就一直調(diào)用自己。

同樣的接下來你也可以用拿到的arr進(jìn)行，去重，排序，等等一系列操作。

document.children
children() 方法返回返回被選元素的所有直接子元素。

更多關(guān)于children()的使用方法可以去W3schol了解哦！

到這里上邊提到的三個方法就搞定了，其實(shí)這就是最基本的方法，所以基礎(chǔ)很重要，基礎(chǔ)很重要，基礎(chǔ)很重要！??！