Это получает все элементы из простого document.querySelectorAll('*'), которое соответствует всему. Вызов, который возвращает NodeList, поэтому вы хотите превратить его в массив , используя Array.from(...).
В следующей строке используется метод Array reduce для преобразования этот массив из множества элементов в единую карту. Он делает это, используя узел tagName в качестве ключа на карте и назначая узел этому ключу. На самом деле он должен сначала создать массив в элементе карты, чтобы он мог поместить sh все похожие узлы в этот массив. Это делается с помощью имени типа элемента, например DIV, в качестве ключа на карте. Если тип узла виден впервые, он создает массив, а затем во всех случаях помещает элемент в массив.
let allelements = Array.from(document.querySelectorAll('*'));
let result = allelements.reduce(function(map, obj) {
if (map[obj.tagName] == null) {
map[obj.tagName] = [];
}
map[obj.tagName].push(obj);
return map;
}, {});
console.log(result);
<div id="div-one">
<p>one</p>
<p>two</p>
</div>
<div id="div-two">
<p>three</p>
<p>four</p>
<p>five</p>
</div>
Затем вы можете перебирать ключи карты, чтобы узнать, сколько существует элементов каждого типа. Если все, что вас волнует, это общее количество элементов, вы можете пропустить уменьшение массива и просто использовать allelements.length, который сообщает вам, сколько всего узлов было выбрано.
Обратите внимание, что это получает ВСЕ элементы! Вы можете ограничить его только элементами <body>, сначала выбрав тело, а затем используя querySelectorAll на , что .
В этом примере я также добавил суммирование количества каждого типа элемента на консоль.
let body = document.querySelector('body');
let allelements = Array.from(body.querySelectorAll('*'));
let result = allelements.reduce(function(map, obj) {
if (map[obj.tagName] == null) {
map[obj.tagName] = [];
}
map[obj.tagName].push(obj);
return map;
}, {});
console.log('Resulting map =', result);
console.log('Counts:');
for (tag of Object.keys(result)) {
console.log(tag.toLowerCase(), result[tag].length);
}
<div id="div-one">
<p>one</p>
<p>two</p>
</div>
<div id="div-two">
<p>three</p>
<p>four</p>
<p>five</p>
</div>