如何获取 HTML Snippet 中使用的所有类名的列表？
例如下面的 HTML Snippet，
<div class="name">
<div class="first"></div>
<div class="last"></div>
</div>
将输出name、first、last 或name、name > first、name > last。在这里，我关心的是首先找到所有的类选择器。嵌套可以是可选的。
我希望使用 Javascript 或正则表达式。
【问题讨论】：
标签： javascript html css-selectors
使用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));
}
【讨论】：
document.querySelectorAll('[class]') 会更快吗？
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。
【讨论】：
从@user1679669 和@Nermin 使用Set 的回答中背负单线，您可以使用此单线获取页面上所有类的列表：
const allClasses = [...new Set([].concat(...[...document.querySelectorAll('*')].map(elt => [...elt.classList])))];
【讨论】：
一个按字母顺序返回唯一类名的单行代码，查询部分基于@torazaburo 的答案：
[].concat(...[...document.querySelectorAll('*')].map(e=>[...e.classList])).filter((d,i,a)=>a.indexOf(d)==i).sort()
【讨论】：
我会做类似下面的 sn-p 的事情，它使用 jQuery，但这只是更容易阅读 imo，我认为 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>【讨论】：
这是 HTML：
<div id="oye">
<div class="pop"></div>
<div class="hop"></div>
<div class="bob"></div>
</div>
<p id="my"></p>
在 Jquery 中，你会得到所有类名的数组，检查下面的代码
$(document).ready(function(){
var myclass = [];
var parent = $("#oye");
var divs = parent.children();
for(var i = 0; i < divs.length; i++){
myclass.push(divs[i].className)
}
//console.log(myclass);
var myclasses = myclass.join(', ');
$("#my").html(myclasses);
});
【讨论】：
要访问 Dom 中的类，您可以执行以下操作
var nameClass = document.getElementByClassName("name");
var firstClass = document.getElementByClassName("first");
var lastClass = document.getElementByClassName("last");
【讨论】：
在一维中获取所有类和唯一的类。
const allClasses = Array.from(new Set(document.querySelectorAll("*").map(el => el.classNames)));
const flatClasses = Array.from(new Set(allClasses.flat(1)))
【讨论】：