settings_applicationsEventTarget > settings_applicationsNode > settings_applicationsElement > settings_applications[[Prototype]]
요소의 class
값 목록을 유사 배열인 DOMTokenList
로 참조한다.
웹브라우저는 요소의 class 목록을 DOMTokenList
객체로 준비해 준다. DOMTokenList
객체는 add()
, remove()
, replace()
, toggle()
메소드 등을 사용하여 자료 변경이 가능하다. 따라서 자유롭게 class
항목을 추가하거나 제거, 또는 변경이 가능하다. 이때 웹브라우저는 변경된 class
를 분석해 리플로우(reflow), 리페인팅(repainting)한다.
최종 렌더링 이후 동적 CSS 적용을 위해서 매우 유용한 프로퍼티이다. style
이라는 프로퍼티로 CSSStyleDeclaration
객체를 참조해 요소에게 인라인 스타일로 동적 적용이 가능하지만 복잡한 스타일 적용은 classList
프로퍼티를 사용하는게 더욱 효과적이다. 웹 문서에 관여하는 CSS 코드에 동적으로 적용할 CSS class 를 미리 준비해 두어야 하는데 다음 사항을 주의할 필요가 있다.
classList
프로퍼티를 통하여 DOMTokenList
자료 구조를 변경할 때 적용 시점에 따라 이미 적용된 스타일이 재정의 될 것이라 생각하지만 모두 그렇지 않다. 웹브라우저는 웹 문서에 사용되는 class를 미리 해석해 준비해 두어 적용 시점이 되면 요소에게 반영해서 렌더링한다. 따라서 DOMTokenList
자료 구조를 변경할 때 우선 순위가 낮은 class를 사용할 경우에는 반영이 안된다. 이 경우에는 !important
키워드를 사용해야 한다.
element.classList
분류 | 값 | 설명 |
---|---|---|
writable | yes |
©2024 devdic.com, Korea
출처를 밝힌 리소스 이외의 본 레퍼런스에 사용된 모든 생성물의 소유 및 저작권은 devdic.com에 있습니다. 특별히 재배포를 금지한 것 이외는 재배포가 가능하며 반드시 출처를 표기해 주시기 바랍니다.
현재는 베타 버전으로 미등록 및 불완전한 콘텐츠가 일부 있을 수 있습니다. 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
기본적으로 W3C 기술 사양을 기준으로 작성하였으며 일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.
master@cydemy.com