원생 JS 동적 추가 및 삭제 클래스 에 대한 자세 한 설명

필요 로 하기 때문에 버튼 그룹 에 클릭 이벤트(이벤트 의뢰 요청)를 감청 합 니 다.버튼 이 클릭 되 었 을 때 해당 버튼 에 클래스(활성화 클래스)를 추가 하고 클릭 하지 않 은 다른 단 추 는 이 클래스 를 이동 합 니 다.
클래스 를 추가 하고 삭제 하 는 방법 은 세 가지 가 있 습 니 다.
우선 dom 대상(dom 요소 라 고도 함)을 기다 리 고 document.getElement...의 몇 가지 방법 으로 얻 을 수 있 습 니 다.
...와 같다

let element = document.getElementById("box");

1.클래스 이름 을 통 해 클래스 이름 가 져 오기:el.className,할당:el.className="className"은 원래 클래스 를 덮어 씁 니 다.
2.속성 을 통 해 클래스 이름 가 져 오기:el.getAttribute("class");할당:el.setAttribute("class","className 1 className 2");원래 종 류 를 덮어 씁 니 다.
3.속성 노드 attributeNode(성능 은 떨 어 지지 만 i,getAttribute()ie 의 일부 버 전 은 지원 되 지 않 습 니 다)setAttributeNode()방법 으로 요소 에 지정 한 속성 노드 를 추가 합 니 다.
만약 이 지정 한 속성 이 이미 존재 한다 면,이 방법 은 그것 을 바 꿀 것 입 니 다.클래스 이름 가 져 오기:getAttributeNode("class").value,할당:

let attr = document.createAttribute("class");
attr.nodeValue = "className";
el.setAttributeNode(attr)

4.classList 속성 을 통 해 클래스 이름 el.classList 가 져 오기;추가 클래스 이름:el.classList.add("className");클래스 삭제:el.calssList.remove("className");
위의 네 가지 방법 은 classList 가 가장 유연 하고 사용 하기 좋 지만 ie9 이하 의 브 라 우 저 는 지원 되 지 않 으 며 호환성 이 떨 어 집 니 다.
코드 는 다음 과 같 습 니 다:
html

<div id="btn-group">
	<div class="btn btn-active">  1</div>
	<div class="btn">  2</div>
	<div class="btn">  3</div>
	<div class="btn">  4</div>
</div>

js 코드,그 중 ES6 문법 사용(ES6 로 간결 쓰기)

let myEventUtil = {
	//       
	addEvent (element, type, handler) {
		if (element.addEventListener) {
			element.addEventListener(type, handler, false);
		} else if (element.attach){ // ie
			element.attach("on"+ type, handler);
		} else {
			element['on' + type] = handler;
		}
	},
	getTarget (event) {
		let event = event || window.event;
		return event.target || event.srcElement;
	}
}
let my$ = id => document.getElementById(id);

let btnGroup = my$(“btn-group”);
myEventUtil.addEvent(btnGroup, 'on', function (ev) {
	//      btn         btn-active
	// console.log(this) ==>    dom   btnGroup 
	//      el.children[i]        
	//            el.classList.remove("className")    
	// el.classList.add("className")     
	
	//    
	let len = this.children.length;
	for (let i = 0; i < len; i ++) {
		this.children[i].classList.remove("btn-active");
		// this.children[i].className = "btn"; //        
	}
	//    ,       btn      
	myEventUtil.getTarget(ev).classList.add("btn-active"); 
	// myEventUtil.getTarget(ev).className = "btn"; //        
});

위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 원생 JS 의 동태 적 인 추가 와 삭제 류 의 상세 한 통합 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!