一. 获取页面中所有的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]
})
最终: