[JS] class name 추가, 삭제

제어할 HTML 요소 특정하기

자바스크립트 문서를 통해 HTML 요소를 제어하기 위해서는 querySelector() 또는 getElementById() 메소드를 이용하여 제어하고자 하는 요소를 특정하는 과정이 필요하다

예시

<!-- HTML document -->
<div class="greeting">
  <h1>Hello World!</h1>
</div>

// JavaScript document
var element = document.getElementById(.greeting);

클래스 추가 [ .classList.add() ]

HTML 엘리먼트가 가진 기존 class 속성을 유지한 채, 새로운 클래스 값을 추가한다.

사용법

element.classList.add('className');
element.classList.add('className1 className2');

예시

<!-- HTML document -->
<div class="greeting">
  <h1>Hello World!</h1>
</div>

// JavaScript document
element.classList.add('title');

<!-- HTML document -->
<div class="greeting title">
  <h1>Hello World!</h1>
</div>

클래스 삭제 [ .classList.remove() ]

HTML 엘리먼트의 class 속성 중에서 인자로 사용된 클래스 값을 삭제한다.
인자로 사용된 클래스 값 외에 다른 class 속성들은 그대로 유지되며, 존재하지 않는 클래스를 제거해도 에러가 발생하지 않는다.

사용법

element.classList.remove('className');
element.classList.remove('className1 className2');

예시

<!-- HTML document -->
<div class="greeting title">
  <h1>Hello World!</h1>
</div>

// JavaScript document
element.classList.remove('greeting');

<!-- HTML document -->
<div class="title">
  <h1>Hello World!</h1>
</div>

클래스 변경 [ .className ]

HTML 엘리먼트의 class 속성을 인자로 사용된 클래스 값으로 변경한다. 기존 class 속성은 초기화된다.

사용법

element.className = 'className';

예시

<!-- HTML document -->
<div class="greeting title">
  <h1>Hello World!</h1>
</div>

// JavaScript document
element.className = 'hello';

<!-- HTML document -->
<div class="hello">
  <h1>Hello World!</h1>
</div>

클래스 토글 [ .classList.toggle() ]

HTML 엘리먼트에, 특정 동작에 따라 클래스 값이 추가되었다 삭제되도록 한다.
첫번째 인자는 클래스 값, 두번째 인자는 boolean 값을 받는다.

인자가 하나만 사용된 경우, 클래스 값을 토글링한다.
엘리먼트의 class 속성에 인자로 사용된 클래스 값이 존재하면 해당 클래스 값을 제거하고 false를 반환하며, 클래스 값이 존재하지 않는 경우에는 해당 클래스 값을 추가한 뒤 true를 반환한다.

두번째 인자가 존재하는 경우, 그 값에 따라 클래스 값을 추가/삭제한다.
두번째 인수의 값이 true인 경우, 클래스 값을 추가하고, false인 경우에는 클래스 값을 제거한다.

사용법

element.classList.toggle('className');
element.classList.toggle('className', true);

예시

<!-- HTML document -->
<div class="hello">
  <h1>Hello World!</h1>
</div>

// JavaScript document
function buttonClicked() {
  element.classList.toggle('clicked');
}

버튼 클릭 실행

<!-- HTML document -->
<div class="hello clicked">
  <h1>Hello World!</h1>
</div>

버튼이 클릭 재실행

<!-- HTML document -->
<div class="hello">
  <h1>Hello World!</h1>
</div>

클래스 확인 [ .classList.contains() ]

HTML 엘리먼트의 class 속성에 인자로 사용된 클래스 값이 존재하는지 확인한다.
클래스 값이 존재한다면 true를, 존재하지 않으면 false를 반환한다.

사용법

element.classList.contains('className');

예시

<!-- HTML document -->
<div class="title greeting">
  <h1>Hello World!</h1>
</div>

// JavaScript document
element.classList.contains('hello'); // false
element.classList.contains('title'); // true

클래스 교체 [ .classList.replace() ]

HTML 엘리먼트의 class 속성 내 존재하는 특정 클래스 값을 다른 클래스 값으로 교체한다.
교체할 클래스 값을 첫번째 인자로, 첫번째 인자를 대체할 새로운 클래스 값을 두번째 인자로 받는다.

사용법

element.classList.replace('oldClass', 'newClass');

예시

<!-- HTML document -->
<div class="title greeting">
  <h1>Hello World!</h1>
</div>

// JavaScript document
element.classList.replace('greeting', 'hello');

<!-- HTML document -->
<div class="title hello">
  <h1>Hello World!</h1>
</div>