使用 Javascript 按标签元素分组答案

【问题标题】：Group by Tag elements with Javascript使用 Javascript 按标签元素分组
【发布时间】：2016-12-14 14:11:23
【问题描述】：

HTML

<html>
    <head></head>
    <body>
        <p></p>
        <p></p>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

document.getElementsByTagName("*").length // 8

如何统计每个标签名的个数（类似于SQL中的GROUP BY）得到这样的对象：

{
    html: 1
    head: 1
    body: 1
    p: 2
    div: 3
}

我可以用多行代码得到结果，但也许只用几行代码就可以做到这一点？

【问题讨论】：

你尝试了什么？

标签： javascript html

【解决方案1】：

您可以使用返回的NodeList 的tagName 属性并计数

var count = {};

Array.prototype.forEach.call(document.getElementsByTagName("*"), function (a) {
    count[a.tagName] = (count[a.tagName] || 0) + 1;
});

console.log(count);

【讨论】：

双面掌

【解决方案2】：

你可以做到，

var result = {};

[...document.getElementsByTagName("*")].forEach(function(itm) {
  var tag = itm.tagName;
  this[tag] = this[tag] || 0;
  this[tag]++;
}, result);

console.log(result);

如果您的环境不支持扩展运算符，则在使用 forEach 之前手动将 nodeList 转换为数组。或者我们可以使用传统的for() 循环来编写它。

var result = {}, tag;
var elems = document.getElementsByTagName("*");

for(var i=0;i<elems.length;i++){
  tag = elems[i].tagName;
  result[tag] = result[tag] || 0;
  result[tag]++;
}

console.log(result);

【讨论】：