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

Question

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

例如，下面的HTML代码段，

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

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

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

Answer 1

简单的 ES10 新 Set() 方法

const allClasses = Array.from(document.querySelectorAll('[class]')).flatMap(e => e.className.toString().split(/\s+/))
const classes = new Set()

allClasses.forEach(c => classes.add(c))

console.log(classes)

获取所有类名称并按空间分割，例如“child first”将变成“child”和“first”。如果您不喜欢这种行为，您可以删除 toString 和 split 函数。

然后将每个类名称添加到集合中。不需要检查重复项，因为集合已经为我们完成了这项工作。如果您确实想存储重复项，可以使用 Map 代替。

Answer 2

使用Set顺应 @user1679669 的单行和 @Nermin 的答案，您可以使用以下单行获取页面上所有类的列表：

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

Answer 3

使用获取文档中的所有元素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));
}

Answer 4

我会做类似下面的代码片段的事情，它使用 jQuery，但在我看来，这更容易阅读，我认为 Javascript 版本不会更难。

基本上你想要获取所有的nodes，然后将所有独特的类添加到列表中。

如果您正在寻找可以与 Javascript 一起应用的动态类，那么实现起来要困难得多。

嵌套需要更多地了解如何执行、如何处理欺骗类而不是欺骗类数组等。

如果这个因为 jQuery 而被否决，我会很沮丧。

var classes = [];

$('body *:not(script)').each(function(){
  _classes = $(this).attr('class') ? $(this).attr('class').split(' ') : []
  _classes.forEach(function(entry){
    if(classes.indexOf(entry) < 0){
      classes.push(entry)
    }
  })
})

console.log(classes)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dog"></div>
<span class="dog cat"></span>
<div></div>
<blockquote class="bird"></blockquote>