如何获取 HTML 代码段中使用的所有类名的列表？
例如下面的HTML片段，
<div class="name">
<div class="first"></div>
<div class="last"></div>
</div>
会输出
namefirstlastnamename > firstname > last我希望使用 Javascript 或正则表达式。
使用
querySelectorAllallClassesvar 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>要仅获取文档的一部分中的类名，请在
querySelectorAllvar 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_.uniqfunction unique(array) {
var prev;
return array.sort().filter(e => e !== prev && (prev = e));
}
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()
我会像下面的代码片段那样做一些事情，它使用 jQuery 但这更容易阅读 imo，我认为 Javascript 版本不会更难。
基本上你想获得所有的
nodes如果您正在寻找可以与 Javascript 一起应用的动态类，这将much 难以实现。
嵌套需要更深入地了解它应该如何执行，如何处理欺骗类而不是欺骗类数组和类似的..
如果这个 get 因为 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);
});
更正KR Thirto的回复：
const allClasses = new Set(Array.from(document.querySelectorAll("*")).map( (el) => el.className ));
const flatClasses = new Set(Array.from(allClasses).map((el) => el.split(/\s+/g)).flat(1).filter((el) => el));首先我们将所有 DOM 节点的类名属性映射到一个集合中。这个类名属性包含实际的类名，用空格分隔。
由于 split() 返回一个数组，在 allClasses 中拆分 classname 属性将得到一个数组，其中一些元素是字符串，而其他元素是包含 split() 对 classname 操作结果的数组。
为了展平这个数组，使用了 flat(1) 方法。 需要应用 filter() 方法来过滤掉未定义（空字符串）的类名。
在一维中获取所有类别和唯一类别。
const allClasses = Array.from(new Set(document.querySelectorAll("*").map(el => el.classNames)));
const flatClasses = Array.from(new Set(allClasses.flat(1)))