자바스크립트 classList 로 DOM요소의 클래스 이름 가져오기

🔥 className VS classList

 

투두리스트를 만드는 프로젝트를 하는 중에, DOM요소의 클래스 이름을 가져올 때 className보다 classList의 메서드를 쓰는 게 더 좋다는 피드백을 받았다. className은 전체 class들을 하나의 string으로 반환하기 때문에 나중에 새로운 css가 추가되면 원치 않는 에러가 발생할 수 있다는 이유때문이었다.

 

Element.classList - Web API | MDN

 

그래서 MDN의 classList 문서를 읽던중 .item() 이라는 메서드가 적당해보였다.

 

Element.classList

• Element.classList is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.
• Using classList is a convenient alternative to accessing an element's list of classes as a space-delimited string via element.className.
• A DOMTokenList represting the contents of the element's class attribute.

 

메서드 

• item(Number) : 콜렉션의 인덱스를 이용하여 클래스 값을 반환한다.

 

어떤 엘리먼트의 클래스가 여러개일 경우는 인덱스를 지정해서 원하는 값만 가져올 수 있다는 것 같다. 직접 코드로 확인해보자.

 

const className = target.className;
const className2 = target.classList.item(0);

console.log(className);
console.log(className2);

결과는 다음과 같다.

 

 

className을 써서 값을 가져오면 해당 엘리먼트의 클래스 값 전체를 string으로 가져오지만, classList.item()을 이용하면 인덱스로 원하는 값 하나를 지정해서 가져온다.

 

내가 짜고 있던 코드에선 all이라는 값만 가져오고 싶었기 때문에 classList의 메서드를 쓰는 게 더 적합해보인다.