문서 객체 모델(DOM, Document Object Model)

- 문서 객체 모델(DOM)이란?

웹 페이지(HTML or XML)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스

자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당

W3C의 표준 객체 모델

DOM은 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조 => HTML DOM, 혹은 HTML DOM Tree로 부르기도 함

트리 자료 구조로 구축이 되기 때문에 HTML 문서는 최종적으로 하나의 최상위 노드(root node)에서 시작해 자식 노드들을 가지며, 아래로만 뻗어 나가는 구조로 만들어지게 됨

DOM은 꼭 자바스크립트로만 구현되는 것이 아닌, 어떤 프로그래밍 언어에 의존하지 않는 독립적인 인터페이스. but 현재 웹 브라우저에서 DOM을 조작하는 언어는 자바스크립트 뿐

 

위 문서는 아래 트리 구조로 표현 가능

- document node(문서 노드)

DOM Tree에서 최상위 루트 노드를 나타내며, document 객체를 가리킴

HTML 문서 전체를 나타내는 노드

window 객체의 document 프로퍼티로 바인딩(연결)이 되어있어 window.document, document로 참조해 사용할 수 있음

HTML 문서에 document node는 단 1개만 존재함

- element node(요소 노드)

모든 HTML 요소(body, h2, div 등)는 요소 노드

속성 노드를 가질 수 있는 유일한 노드

부모-자식 관계를 가지게 되기 때문에 계층적 구조를 이룰 수 있음

- attribute node(속성 노드)

모든 HTML 요소의 속성은 속성 노드

요소 노드에 대한 정보를 가지고 있음 => 부모 노드가 아닌 해당 노드와 바인딩(연결)이 되어있음

- text node(텍스트 노드)

HTML 문서의 거의 모든 텍스트는 text node

정보를 표현하며, 가장 마지막에 위치하는 자식노트(leaf node)

 

위 4가지 노드들로 스크립팅 언어는 웹 페이지에 접근하고 조작

데이터 검색이 빠른 트리 구조로 이뤄져 있기 때문에 접근하고 조작하여 업데이트 하는 속도가 빠른 편

 

- DOM의 종류

Core DOM: 모든 문서 타입을 위한 DOM 모델

HTML DOM: HTML 문서를 위한 DOM 모델 / HTML 문서를 조작하고 접근하는 표준화된 방법을 정의 / 모든 HTML 요소는 HTML DOM을 통해 접근할 수 있음

XML DOM: XML 문서를 위한 DOM 모델 / XML 문서를 조작하고 접근하는 표준화된 방법을 정의 / 모든 XML 요소는 XML DOM을 통해 접근할 수 있음

 

- 자바스크립트를 이용한 DOM 동적 생성

자바스크림트로 HTML 문서에 없는 노드를 만들어 이어 붙이거나 노드를 수정하여 웹 페이지에 렌더링되게 만들어 동적으로 구현 가능

DOM을 이용하여 자바스크립트로 다음과 같은 작업 가능

• 새로운 HTML 요소나 속성 추가
• 존재하는 HTML 요소나 속성 제거
• HTML 문서의 모든 HTML 요소 변경
• HTML 문서의 모든 HTML 속성 변경
• HTML 문서의 모든 CSS 스타일 변경
• HTML 문서에 새로운 HTML 이벤트 추가
• HTML 문서의 모든 HTML 이벤트에 반응

 

- DOM 객체의 구성 요소

프로퍼티(property): DOM 객체의 멤버 변수 / HTML 태그의 속성을 반영

메소드(method): DOM 객체의 멤버 함수 / HTML 태그를 제어

컬렉션(collection): 정보를 집합적으로 표현하는 일종의 배열

이벤트 리스너(event listener): HTML 태그에 작성된 이벤트 리스너(onclick, onchange 등)들을 그대로 가짐

스타일(style): HTML 태그에 적용된 CSS 스타일 시트에 접근 가능

 

- DOM의 주요 데이터타입(Datatype)

데이터 타입은 객체이기 때문에 각각 프로퍼티와 메소드를 가지고 있음

document: member가 document 타입의 object를 리턴할 때, 이 object는 root document object 자체임

element: DOM API의 member에 의해 return된 element 또는 element 타입의 노드

nodeList: element의 배열

namedNodeMap: 배열과 유사하지만 안의 요소에 접근할 때 name 또는 index로 접근

 

- Javascript로 DOM 접근 방법

DOM의 인터페이스를 이용하여 접근할 수 있음

아래는 자바스크립트가 DOM의 API중 자주 쓰는 메소드와 프로퍼티

• document.querySelector(selectors)
• document.querySelectorAll(selectors)
• document.getElementById(id)
• document.getElementByTagName(name)
• document.createElement(name)
• node.append(node)
• node.appendChild(node)
• node.remove(node)
• node.removeChild(node)
• element.innerHTML
• node.textContent
• element.setAttribute(name, value)
• element.getAttribute(name)
• element.addEventListener(type, listener)

위 메소드, 프로퍼티로 동적으로 노드 생성, 삭제, 변경 가능

 

 

 

 

 

 

참고:

https://www.codestates.com/blog/content/dom-javascript

문서 객체 모델 DOM 과 자바스크립트 JavaScriptㅣ생성 방식 및 접근 방법 - 코드스테이츠 공식 블로

http://www.tcpschool.com/javascript/js_dom_concept

코딩교육 티씨피스쿨