寫在前面

統計一個頁面中 DOM 節點的所有標籤型別，這是之前面試的時候遇到的一個問題，當時想的比較複雜，就是從根節點 html 開始像二叉樹那樣遞迴地遍歷，將所有的節點遍 push 進去，然後再進行陣列去重。

後來在網上搜過了解決方法，發現原來如此簡單，竟被自己複雜化了。解決方法如下：

實現方法

實現方法就是運用 DOM 的原生 API，用 * 匹配所有的標籤名然後獲得當前頁面中所有的 DOM 元素，然後進行篩選的操作。

let elementCollection = document.getElementsByTagName('*')  //獲取全部的元素節點

let elementArray = Array.from(elementCollection)     //轉成陣列是為了用 map 

let tagArray = elementArray.map(item => item.tagName)  //使用 map 取得所有元素節點的標籤名

let noRepeatTagArray = Array.from(new Set(tagArray))    //對標籤名陣列去重

let toLower = noRepeatTagArray.map(item => item.toLowerCase())   //獲得標籤名的小寫方式

console.log(toLower)
 

上述程式碼可在瀏覽器的開發者工具下直接執行，在瀏覽器直接執行的效果如下：

寫在後面

以上就是我目前學到的最簡單的方法，以後用到或有其他實現方法時再來補充