[Javascript] Web API DOM 클래스 다루기

HTML 요소의 클래스 이름을 변경하는 방법.

MDN 문서 : className

예시 코드

html

<!-- html -->
<h2 class="title-red">kisBlog</h2>

css

//css
.title-red {
	color: 'red';
}

.title-blue {
	color: 'blue';
}

Javascript

//Javascript
const title = document.querySelector('.title-red');
if (title.className !== 'title-red') {
	title.className = 'title-red';
} else {
	title.className = 'title-blue';
}

 

 

클래스 이름 변경하는 법

MDZ : Element.classList

Element.classList 프로퍼티는 DOMTokenList를 반환하는 읽기 전용 프로퍼티입니다.

브라우저에서 console.log(요소.classList)를 하면, DOMTokenList를 반환해줍니다.

add( String )

괄호 안에 들어간 String 문자열(클래스 이름)을 요소의 클래스로 추가합니다.

 

remove( String )

괄호 안에 들어간 String 문자열(클래스 이름)을 제거합니다.

 

contains( String )

클래스 속성이 있는지 확인합니다. boolean반환합니다.

 

위의 세가지 함수를 사용해서 간단한 클릭 이벤트를 만들어 보았습니다. 그림 아래에 코드가 있습니다.

글자 클릭 전,

클릭 후,

HTML

<h2 class="title-red">kisblog</h2>

Javascript

const title = document.querySelector('.title');
title.addEventListener("click", clickEvent);
function clickEvent() {
  if(title.classList.contains('active')) {
    title.remove('active');
  } else {
    title.classList.add('active');
  }
}

CSS

.active {
	color: blue;
    font-size: 70px;
}

위의 코드처럼 작성해서 실행하고, 브라우저에서 h2요소 영역을 클릭하게 되면, h2요소에 클래스가 'active'가 추가되어서,

아래처럼 글자가 CSS처럼 확대되고, 파란색 글자로 변경된 것을 확인하실 수 있습니다.

 

toggle( String )

이 함수는 코드를 간결하게 해줍니다.

toggle()괄호 안에 적어 준 클래스가 있는지 확인하고, 있으면, remove()를. 없으면, add()를 해줍니다.

이 toggle()함수를 사용해서 위에 작성한 코드를 기능은 그대로 작동하도록 수정해 보겠습니다.

HTML이나 CSS를 수정할 필요없이, Javascript만 수정하면 됩니다.

const title = document.querySelector('.title');
title.addEventListener('click', clickEvent);
function clickEvent() {
  title.classList.toggle('active');
}

 

item( Number )

괄호에 들어가는 인덱스의 클래스 값을 반환합니다.

 

replace( oldClass, newClass )

존재하는 클래스를 새로운 클래스로 변경해주는 함수입니다.