Written by nodejs-style
on 2021-12-24

JavaScript class 존재 여부 확인하는 쉬운 방법

반응형

자바스크립트를 이용하여 엘리먼트노드가 특정 클래스 문자열을 포함하고 있는지 확인하는 방법을 알아봅니다.

방법 1) Element.classList.contains 메서드

contains() 메서드를 사용하면 메서드에 전달한 문자열과 동일한 클래스명을 엘리먼트 노드가 포함하고 있는지를 확인할 수 있으며 그 결과값으로 참 또는 거짓의 boolean 값을 반환받습니다.

const btnEl = document.querySelector('button'); const classes = btnEl.classList; if (classes.contains('my-class')) // expected value is true console.log('the classList contains \'my-class\'');

"the classList contains 'my-class'" // 콘솔 메시지

반응형

방법 2) Element.className 속성

Element.className 속성에 접근하면 해당 엘리먼트노드가 가지고 있는 클래스명을 문자열로 반환받을 수 있습니다. 그 후 스트링 객체의 includes() 메서드를 통해 비교 연산을 할 수 있습니다.

hello world!

const btnEl = document.querySelector('button'); const className = btnEl.className; console.log(`className: ${className}`);

"className: my-class my-second-class" // 로그 메시지 출력 결과

반응형

from http://tamagotch.tistory.com/38 by ccl(A) rewrite - 2021-12-24 20:27:18

Top