javascript - 查找 HTML/DOM 中使用的所有类名

Question

如何获取 HTML 代码段中使用的所有类名的列表？

例如，下面的 HTML 片段，

<div class="name">
  <div class="first"></div>
  <div class="last"></div>
</div>

将有输出 name, first, last 或 name, name > first，姓名>姓氏。在这里，我关心的是首先找到所有的类选择器。嵌套可以是可选的。

我希望使用 Javascript 或正则表达式。

Answer 1

使用 querySelectorAll 获取文档中的所有元素，然后遍历它们，获取每个元素的类，按空格将其分开，并将新元素添加到 allClasses数组:

var allClasses = [];

var allElements = document.querySelectorAll('*');

for (var i = 0; i < allElements.length; i++) {
  var classes = allElements[i].className.toString().split(/\s+/);
  for (var j = 0; j < classes.length; j++) {
    var cls = classes[j];
    if (cls && allClasses.indexOf(cls) === -1)
      allClasses.push(cls);
  }
}

console.log(allClasses);

<div class="foo">
  <div class="bar baz"></div>
</div>

要仅在文档的一部分中获取类名，请在 querySelectorAll 调用中指定:

var allElements = document.getElementById('my-elt').querySelectorAll('*');

现代方法

使用 ES6，我们可以把它写成更函数式的:

[].concat(                            // concatenate
  ...[...                             // an array of
    document.querySelectorAll('*')    // all elements
  ] .
    map(                              // mapping each 
      elt =>                          // element
        [...                          // to the array of
          elt.classList               // its classes
        ]
    )
);

或者，作为一个类轮:

[].concat(...[...document.querySelectorAll('*')].map(elt => [...elt.classList]));

然后您需要将 uniq 应用于结果。你可以自己写，或者使用 Underscore 的 _.uniq 等。这里有一个简单的:

function unique(array) {
  var prev;
  return array.sort().filter(e => e !== prev && (prev = e));
}