DOM(문서 객체 모델)
- 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 스타일 요소를 구조화 시켜 표현
- 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 인터페이스
- HTML또는 XML을 스크립팅언어(자바스크립트)와 서로 이어주는 역할
- 트리 자료 구조로 구축
- 현재 웹 브라우저에서 DOM을 조작하는 언어는 자바스크립트 뿐
트리자료 구조
- 노드들의 계층 구조
- 계층 구조로 이루어져 부모-자식 관계, 형제관계를 표현하는 비선형 자료구조
document node (문서 노드)
- DOM Tree에서 최상위 루트 노드이며 document 객체를 나타냄
- HTML 문서 전체를 나타내는 노드
- window 객체의 document 프로퍼티로 바인딩 되어 있어 window.document , document로 참조해 사용 가능
- HTML 문서에 문서 노드는 단 1개만 존재
element node (요소 노드)
- 모든 HTML 요소 (body, h2, div 등)
- 속성 노드를 가질 수 있는 유일한 노드
- 부모-자식 관계를 가지게 되기 때문에 계층적 구조
attribute node (속성 노드)
- 모든 HTML 요소의 속성
- 요소 노드에 대한 정보를 가지고 있음.
- 따라서 부모 노드가 아닌 해당 노드와 연결(바인딩)
text node (텍스트 노드)
- HTML 문서의 모든 텍스트
- 텍스트 노드는 정보를 표현
- 가장 마지막에 위치하는 자식 노드
DOM 객체의 구성 요소
프로퍼티(property)
DOM 객체의 멤버 변수
HTML 태그의 속성을 반영
메소드(method)
DOM 객체의 멤버 함수
HTML 태그를 제어
컬렉션(collection)
정보를 집합적으로 표현하는 일종의 배열
ex) children 컬렉션은 DOM 객체의 모든 자식 DOM 객체에 대한 주소를 가짐
이벤트 리스너(event listener)
HTML 태그에 작성된 이벤트 리스너(onclick, onchange 등)들을 그대로 가짐.
스타일(style)
프로퍼티를 통해 HTML 태그에 적용된 CSS 스타일 시트에 접근 가능
DOM의 데이터타입(Datatype)
document
- member(프로퍼티 혹은 메서드)가 document 타입의 object를 리턴할 때, 이 object는 root document object 자체
ex) element의 ownerDocument property(ex. document.getElementById("myP").ownerDocument)는 해당 프로퍼티가 속해 있는 document를 return 합니다.
element
- element는 DOM API 의 member에 의해 return 된 element 또는 element 타입의 노드
- document.createElement() method 가 node를 참조하는 object 를 리턴한다고 말하는 대신, 이 method가 DOM 안에서 생생되는 element를 리턴
- element 객체들은 DOM Element 인터페이스와 함께, 좀 더 기본적인 Node 인터페이스를 구현한 것이기 때문에 이 참조(reference)에는 두 가지가 모두 포함
nodeList
- nodeList 는 element의 배열(document.getElementsByTagName() method에 의해 리턴된 것과 동일)
- nodeList의 Items 은 index 를 통해 접근 가능
- list.item(1) : nodeList object의 단일 method
- list[1] : array 문법
namedNodeMap
- 배열과 유사하지만 안의 요소에 접근할 때 name 또는 index로 접근
- 리스트는 특별한 정렬이 적용되지 않았기 때문에 열거(enumeration) 할 때 index를 주로 사용
- namedNodeMap는 이를 위해 item() method 가 있으며, namedNodeMap에 item 을 추가하거나 삭제 가능
참고 사이트
https://www.codestates.com/blog/content/dom-javascript
