요소의 classList 속성 사용 방법

2838 단어 Class
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);
    			}
    		}
    	}
    };
    

    좋은 웹페이지 즐겨찾기