如何计算一个HTML页面中有多少种标签

一. 获取页面中所有的DOM元素

二. 伪数组转真数组

三. 数组去重

四. 统计每一个标签在页面中出现了多少次

五. 排序

---

---

第一步: 获取页面中所有的DOM元素

方法: document.querySelectorAll('*')

此方法会返回一个NodeList伪数组

let doms = document.querySelectorAll('*')

第二步: 伪数组转真数组

方法1: [...doms]

方法2: Array.prototype.slice.call(fakeArray)

方法3: Array.from()

方法4: Array.map()

// 注意这里要获取每一个元素的标签名, 不获取的话就是每一个node节点
let domArr = Array.from(doms, ele => ele.tagName)

第三步: 数组去重

方法1: 利用set集合

方法2: 通过filter()

        function unique(arr) {
            return arr.filter((item, index, arr) => {
                return arr.indexOf(item, 0) == index
            })
        }

        let farr = unique(domArr)

上面方法概况来说的话就是 arr.indexOf只会返回在arr数组中第一次出现的位置, 而index会返回arr中每一个元素的位置 , 如果arr.indexOf和index一样, 那便是该元素第一次被遍历到, filter会接收到这个返回的值并添加到新数组中. 反之不做添加

到这里就做完了, 下面是一些拓展

---

第四步: 统计每一个标签在页面中出现了多少次

        function arrAll(arr) {
            return arr.reduce((obj, name) => {
                if (name in obj) {
                    obj[name]++
                } else {
                    obj[name] = 1
                }
                return obj
            }, {})
        }
        let arr2 = arrAll(domArr)

第五步: 排序

因为arrAll()函数返回的是一个对象, 但在js中没有直接对对象进行排序的方法

所以我们通过Object.entries() 这个方法将对象转成数组, 当然还有Object.keys和Object.values结合也可以转. 但Object.entries()这个方法是将对象的每一个键值对都放进一个数组中, 返回的就是一个二维嵌套数组. 

如上图

 接下来用数组的sort()方法进行排序即可

        // 对象转成数组
        let arr3 = Object.entries(arr2)
        // 对数组进行排序
        arr3.sort(function (a, b) {
            return a[1] - b[1]
        })

最终:

 完