Day75 - [js]노드 클래스의 제어

이번에는 java script 를 사용해서 class 를 제어하는 법에 대해서 알아 봅시다.

 

노드 클래스의 제어

 

위의 버튼은 class 이름이 'btn' , id 이름이 'btn' 입니다.

 

그리고 이 버튼을 사용할 때 저희는 거의 document.getElementById("btn") 을 사용했죠?

 

그리고, 안에 속성 id , innerHTML , value , style 은 그냥 .id = "btn" 등으로 사용 했었습니다.

 

그런데, 생각해보면 btn.class = "btn" 이렇게 사용해본 적은 없죠?

 

실제로 아래와 같이 코드를 짜면 에러가 납니다.

var btn = document.getElementById("btn");

btn.class = "btn";

 

그 이유는, class 속성을 제어하는 이름은 class 가 아닌, className 이기 때문입니다. ( class 는 예약어<키워드>)

그리고, class 속성은 이름을 1개뿐 아니라 여러가지를 가질 수 있습니다.

이렇게 말이죠. 그러면 이 버튼은 클래스가 "btn", "btn-default" 이렇게 2개를 가지게 됩니다.

 

그래서 className 으로 접근하게 되면?

이렇게 나오게 됩니다.

 

그래서, class 가 가진 이름을 배열형태로 가지고 오는 classList 가 있습니다.

 

classList 로 접근하게 되면, 아래와 같이 나오게 되는데. 인덱스를 통해서 접근을 할 수도 있고, 함수를 써서 접근할 수도 있습니다. 아래의 _proto_: DOMTokenList 를 열어보면, 사용할 수 있는 함수들이 있는데요

이름만 봐도 대충 어떤 애들인지 감이 오죠?

 

이 중에서 전부 알 필요는 없고 ( 알면 좋지만 ) 필요한 애들만 좀 봅시다.

 

add("이름") : "이름" class 를 추가한다

remove("이름") : class 중에 "이름" 이 있다면 삭제한다

contains("이름") : class 중에 "이름" 이 있다면 true, 없다면 false 를 반환한다.