DOM 엘리먼트 노드의 CSS 관리
다른 용도로 사용하는 "class" 키워드와의 혼동을 줄이기 위해 DOM 엘리먼트 노드의 CSS는 HTML 태그의 속성과 다른 이름을 사용합니다.
DOM 엘리먼트 노드의 CSS 클래스 접근은
엘리먼트노드.className
으로 합니다.
HTML 태그의 CSS 속성은
class="클래스명"
으로 합니다.
HTML 속성인 class 어트리뷰트를 관리하는 메서드를 사용해
setAttribute('class', '클래스명');
로 적용하면 동일하게 DOM 엘리먼트 노드의 className 속성에도 반영됩니다.
클래스 속성에 접근하는 이름이 다르지만, 둘은 값을 공유하며, 어느 한쪽의 값이 변경되면 함께 반영됩니다.
클래스를 관리 할 때는 querySelector() 에 사용하는 것과 달리 클래스 이름 앞에 점(.) 을 사용하지 않습니다.
클래스 추가
클래스 1개를 추가할 때는 아래와 같이 합니다.
엘리먼트노드.className = '클래스명';
엘리먼트노드.setAttribute('class', '클래스명');
2개 이상의 클래스를 추가하려면 HTML 속성 클래스 나열과 같은 방법으로 공백으로 띄어서 여러개의 클래스를 나열합니다.
엘리먼트노드.className = '클래스명1 클래스명2';
엘리먼트노드.setAttribute('class', '클래스명1 클래스명2');
기존 클래스에 추가 클래스를 적용하려면 앞에 공백을 더해 추가하는 새 클래스명을 + 연산자로 더하면 됩니다.
엘리먼트노드.className += ' 클래스명3';
parent.setAttribute('class', parent.getAttribute('class')+' 클래스3');
클래스 변경
적용되어 있는 여러 클래스 중 하나를 다른 클래스로 변경하려면 정규표현식을 사용해 문자열 대체를 하는 방법을 사용해야 합니다.
제이쿼리나 다른 자바스크립트 라이브러리에서는 여러개의 클래스 중에서 개별 클래스를 변경할 수 있는 방법이 제공되지만, 자바스크립트에는 제공되지 않습니다.
클래스 문자열에서 특정 클래스명을 골라내는 정규식은
/(?:^|\s)클래스명(?!\S)/g
입니다.
예를 들어 "클래스1" 을 "클래스2" 로 바꾸는 경우
엘리먼트노드.className.replace( /(?:^|\s)클래스1(?!\S)/g , '클래스2' );
같이 처리할 수 있습니다.
조금 더 고급스럽게 처리하려면 아래처럼 조건절로 바꾸려는 클래스가 있는지 체크한 후 바꾸는 처리를 할 수도 있습니다.
if( 엘리먼트노드.className.match( /(?:^|\s)클래스1(?!\S)/g ) ){
//클래스1 있음
}
클래스 삭제
클래스 속성 자체를 삭제하려면
엘리먼트노드.removeAttribute('class');
를 사용합니다. 속성 이름 자체가 삭제되므로 HTML 코드를 깨끗하게 유지할 수 있습니다.
클래스만 삭제하고 속성은 남겨두려면 단순하게 속성에 빈값을 대입하면 됩니다.
엘리먼트노드.className = '';
엘리먼트노드.setAttribute('class', '');
classList 를 이용한 편리한 클래스 관리
인터넷 익스플로러에서는 지원되지 않습니다. 인터넷 익스플로러 호환성이 필요한 경우 사용하면 안됩니다.
클래스 속성을 컬렉션 형태로 제공하는 새로운 읽기전용 속성입니다.
개별 클래스를 관리할 수 있기 때문에 앞서의 클래스 추가, 변경, 삭제 방법과 함께 사용하면 클래스 관리를 쉽고 빠르게 할 수 있습니다.
특히 클래스 변경시 개별 클래스를 변경할 수 있기 때문에 기존 클래스를 대체하려는 경우 정규표현식 보다는 이 방법을 권장합니다.
클래스 추가
개별 클래스 단위로 추가 가능하며, 나머지 파라메터를 지원하므로, 여러 개의 클래스명을 한번에 추가할 수 있습니다.
엘리먼트노드.classList.add('클래스1', '클래스2', ...클래스파라메터);
처럼 추가 가능합니다.
나머지 파라메터를 지원하므로 파라메터로 배열을 넣을 수 있습니다.
클래스를 별도의 데이터 구조로 관리를 할 경우 배열을 사용할 수 있습니다.
let arrclass = ['클래스1', '클래스2'];
엘리먼트노드.classList.add(...arrclass);
클래스 삭제
추가와 같은 방법으로 개별 클래스를 삭제할 수 있습니다. 여러개의 클래스명을 파라메터로 넣어 한번에 삭제할 수 있습니다.
엘리먼트노드.classList.remove('클래스1', '클래스2', ...클래스파라메터);
나머지 파라메터를 지원하므로 파라메터로 배열을 넣을 수 있습니다.
클래스를 별도의 데이터 구조로 관리를 할 경우 배열을 사용할 수 있습니다.
let arrclass = ['클래스1', '클래스2'];
엘리먼트노드.classList.remove(...arrclass);
클래스 토글(온오프)
클래스가 있으면 삭제하고, 없으면 추가하는 스위치 메서드입니다.
메뉴나, 대화상자 보이기/감추기 등 사용 빈도가 높은 메서드이므로 꼭 알아두는 것이 좋습니다.
클래스는 1개씩만 개별 적용됩니다.
엘리먼트노드.classList.toggle('클래스1');
클래스가 있는지 확인
클래스가 있는지 확인합니다. 있으면 true, 없으면 false 를 반환합니다.
classList.replace() 메서드와 조합해 사용합니다.
엘리먼트노드.contains('클래스명');
클래스 대체(교환)
클래스를 다른 클래스로 변경합니다.
삭제 후 추가하는 과정을 한번에 처리해줍니다.
클래스 1개씩만 적용 가능합니다.
엘리먼트노드.classList.replace('기존클래스', '새클래스');