Find all classes on current web
Find all elements, all elements with classes and every class.
by Adrián Salgado
HTML
<header class="header"></header>
<main class="main">
<header class="main_header bla bla bla"></header>
<article class="main_article "></article>
<footer class="main_footer ---__ $ 0="></footer>
</main>
<footer class="footer "></footer>
<div id="show"></div>
JavaScript
console.clear();
+function () {
var current, classes, skip,
allClasses = [],
allElements = [],
allElementsWithClasses = [],
total = 0,
unique = true,
elements = document.querySelectorAll('*');
for (var i = 0; i < elements.length; i++) {
//console.log('element: ', elements[i]);
el = elements[i];
if (!el.classList) {
total = total + el.classList.length;
skip = true;
} else {
current = el.className;
allElements.push(el);
if (current != '') {
allElementsWithClasses.push(el);
classes = current.replace(/\s+/g, ' ').trim().split(' ');
if (classes.length > 1) {
for (var m = 0; m < classes.length; m++) {
allClasses.push(classes[m]);
total++;
}
} else {
allClasses.push(classes[0]);
total++;
}
}
}
}
if (skip) {
console.log('total classes: ', total);
} else {
console.log('elements: ', allElements);
console.log('elements w classes: ', allElementsWithClasses);
console.log('classes: ', allClasses);
document.getElementById('show').innerHTML = allElementsWithClasses.length+' elements (out of '+allElements.length+') have '+allClasses.length+' classes';
}
}();