요소의 classList 속성 사용 방법

HTML 요소를 보는classList 요소는 DOMtokenList 유형의 객체로 반환되므로 객체의 속성과 방법을 연구합니다.
이 유형의 대상은 빈칸으로 구분된 문자열 그룹을 설명하고, 그룹의 항목마다 요소의 클래스 이름을 나타낸다.HTMLElement.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList or HTMLAreaElement.relList 등의 메서드가 객체를 반환합니다.

속성:

length - 읽기 전용 속성, classList의 경우 클래스 이름 수

를 나타냅니다.

방법:

item(idx) - 지정된 위치의 항목을 반환합니다.찾지 못하면undefined로 돌아가고, 일부 버전의 브라우저는null로 돌아갑니다.

contains(token) - 그룹에 지정된 요소가 포함되어 있으면true를 되돌려주고 그렇지 않으면false를 되돌려줍니다.classList에 대해 이 방법은 jQuery의hasClass 방법과 같다.

add(token) - 배열에 요소를 추가합니다.classList에 대해 이 방법은 jQuery의ddClass

에 해당한다

remove(token) - 지정된 요소를 제거합니다.classList에 대해 이 방법은 jQuery의removeClass 방법과 맞먹는다.

toggle(token) - 요소를 전환합니다.classList에 대해 이 방법은 jQuery의 toggleClass 방법과 맞먹는다.

간단한 사례

var elemClassList = document.querySelector('#Bubby').classList,
    classNum = elemClassList.length;
elemClassList.add('sexy');
elemClassList.remove('sexy');
elemClassList.toggle('fat');
if( elemClassList.contains('nipple') ){
    console.info('OH YEAH');
}

jQuery의ddClass와removeClass를 시뮬레이션해 주세요.

var Sys = {
	addClass: function (elem, value) {
		//  
		if (!elem) return;
		var arr = [];
		//  
		if (elem.nodeType) arr.push(elem);
		//  HTML ， NodeList HTMLCollection
		if (elem.length) {
			for (var j = 0, ln = elem.length; j < ln; j++) {
				//  HTML 
				if (elem[j].nodeType) arr.push(elem[j]);
			}
		}
		//  
		for (var i = 0, len = arr.length; i < len; i++) {
			var elem = arr[i];
			if (elem.nodeType === 1 && elem.className.indexOf(value) < 0 ) {
				elem.classList.add(value);
			}
		}
	},
	removeClass: function (elem, value) {
		var arr = [];
		if (!elem) return;
		//  HTML 
		if (elem.nodeType) arr.push(elem);
		//  HTML 
		if (elem.length) {
			for (var j = 0, ln = elem.length; j < ln; j++) {
				//  HTML 
				if (elem[j].nodeType) arr.push(elem[j]);
			}
		}
		for (var z = 0, len = arr.length; z < len; z++) {
			var elem = arr[z];
			if (elem.nodeType === 1 && elem.className.indexOf() >= 0) {
				elem.classList.remove(value);
			}
		}
	}
};