HTML 파일에서 CSS 클래스 사용 목록을 가져 오는 방법은 무엇입니까?

Question

html 파일에서 사용되는 클래스 목록이 필요합니다. HTML 파일에 클래스 목록을 가져올 수있는 도구가 있습니까?

Answer 1

정상적으로 작동하며 jquery가 필요하지 않습니다.

var used = []; 
var elements = null; 

//get all elements 
if (typeof document.getElementsByTagName != 'undefined') { 
    elements = document.getElementsByTagName('*'); 
} 

if (!elements || !elements.length) { 
    elements = document.all; // ie5 
} 

//loop over all element 
for (var i = 0; i < elements.length; i++){ 

    //loop over element's classes 
    var classes = elements[i].className.split(' '); 
    for (var j = 0; j < classes.length; j++) { 

     var name = classes[j]; 

     //add if not exists 
     if (name.length > 0 && used.indexOf(name) === -1) { 
      used.push(name); 
     } 
    } 
} 

alert(used.join(' ')); 

더 기능적 접근

var elements = document.getElementsByTagName('*'); 

var unique = function (list, x) { 
    if (x != "" && list.indexOf(x) === -1) { 
     list.push(x); 
    } 
    return list; 
}; 

var trim = function (x) { return x.trim(); }; 

var classes = [].reduce.call(elements, function (acc, e) { 
    return e.className.split(' ').map(trim).reduce(unique, acc); 
}, []); 

Answer 2

더스트 미 셀렉터 (Dust Me Selectors)를 살펴보십시오.

정확하게 찾고자하는 것이 아니며 사용하지 않는 선택자 목록을 보여줍니다. 그러나, 당신이 제공하는 목록의 반대를 사용할 수 있다고 상상해보십시오. 이 페이지에 jQuery를 가지고있는 경우에 http://www.sitepoint.com/dustmeselectors/

Answer 3

는,이 코드를 실행 : 변수 classArray가 HTML 페이지에 지정된 모든 클래스를 포함

var classArray = []; 
$('*').each(function(){if(this.className!=""){classArray.push(this.className)}}) 

여기

는 링크입니다.

Answer 4

나는이 오래된 질문이다 알지만, 그래서 더 많은 사람들이 여기에서도 얻을 수 의심 여기에 구글을 통해 얻었다. querySelectorAll 및 classList (수단 브라우저 지원이 문제가 될 수있다 : IE10 for classList 및 IE8 for querySelectorAll)를 사용

최단 방법과 중복와 같다 :

var classes = 0, 
elements = document.querySelectorAll('*'); 

for (var i = 0; i < elements.length; i++) { 
    classes = classes + elements[i].classList.length;   
} 

I made a jsFiddle을 classList위한 대체하여 (어느 classList을 사용하지 않는 경우 모든 요소, 모든 클래스 및 모든 요소를 ​​클래스로 계산하는 브라우저 지원이 가장 낮습니다.

고유 한 감지 기능을 추가하지는 않았지만 언젠가는 얻을 수 있습니다. 콘솔에서

Answer 5

신속리스트 클래스는

(global => { 
 
    // get all elements 
 
    const elements = document.getElementsByTagName('*'); 
 
    // add only unique classes 
 
    const unique = (list, x) => { 
 
     x != '' && list.indexOf(x) === -1 && x.indexOf('ng-') !== 0 && list.push(x);      
 
     return list; 
 
    }; 
 
    // trim 
 
    const trim = (x) => x.trim(); 
 
    // add to variable 
 
    global.allClasses = [].reduce.call(elements, (acc, e) => e.className.split(' ').map(trim).reduce(unique, acc), []).sort(); 
 
    console.log(window.allClasses); 
 
})(window);