DOM 레벨2, DOM 레벨3

DOM레벨1은 HTML, XML문서 구조를 정의하는데 초점이 맞춰져있습니다.

레벨2와 레벨3은 위 구조에 따른 상호작용 기능 추가 및 고급 XML기능을 지원합니다.

서로 관련있는 아래와 같은 모듈로 구성되어있습니다.

  • DOM 코어 : 레벨 1 코어를 바탕으로 노드에 메서드와 프로퍼티를 추가.
  • DOM 뷰 : 스타일 정보를 바탕으로 여러가지 문서 뷰 정의
  • DOM 이벤트 : 이벤트에 기반한 DOM 문서 상호작용 방법 정의
  • DOM 스타일 : CSS스타일 정보에 접근하고 변경하는 방법 정의
  • DOM 이동과 범위 : DOM문서를 이동하고 특정 범위를 선택하는 새 인터페이스 정의
  • DOM HTML : 레벨1 HTML에 기반하여 새 인터페이스와 프로퍼티, 메서드를 추가

이중 DOM 이벤트는 다음 포스트에서 설명됩니다.

DOM 코어

XML 네임스페이스와 관련된 새 메서드를 다양한 DOM타입에 추가합니다.
xml이나 xhtml문서에서만 필요하며 html에서는 필요하지 않습니다.

DOM 스타일

스타일 모듈은 요소의 스타일 정볼르 조작합니다.
모든 요소에는 style객체가 있고 이를통해 인라인 스타일을 조작 및 확인 할 수 있습니다.
document.styleSheets 컬렉션을 통해서 스타일 시트에 접근할 수도 있습니다.
IE8 이전버전을 제외하고 모두 스타일 시트 인터페이스를 지원하며 이는 모든 DOM기능에 대응하는 프로퍼티와 메서드를 제공합니다.

DOM 이동과 범위

NodeIterator, TreeWalker는 수직 방향을 우선으로 DOM트리를 이동합니다.
NodeIterator는 한단계 앞이나 뒤로 이동하는 방법만 존재하며
TreeWalker는 부모, 형제, 자식등 모든 방향이동을 지원합니다.

참고

내용을 너무 간략하게 요약했는데 사실 기능에 대해서 하나하나 설명하는거보다 아래 치트시트를 참고하는게 더 도움이 될듯해서 간략하게 요약했습니다.
그런 이유로 지원되는 기능을 한눈에 볼수있는 DOM Level 1 & Level 2 CheetSheet를 준비했습니다.


CheetSheet 보러가기



마치며

이번 포스트는 매우 간략하게 중요 요소만 요약하였습니다.

다음 포스트에서는 이벤트에 대해서 자세히 알아보겠습니다.

​


저작자표시