JavaScript의 DOM

DOM이란?

• The Document Object Model, 문서 객체 모델은 HTML, XML문서의 프로그래밍 방식임

• 이 모델은 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공

• W3C의 표준 객체 모델로 계층구조(tree구조)로 표현 됨

 

DOM과 자바스크립트

• DOM이 없다면 자바스크립트 언어는 웹페이지, XML페이지 및 요소들과 관련된 정보를 갖지 못함

• 페이지 콘텐츠는 DOM에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있음

• API(web or XML page) = DOM +JS(scripting language)

• 문서의 구조적인 표현은 단일 API를 통해 이용 가능하며, DOM의 구현은 어떠한 언어에서도 가능함

• 자바스크립트는 새로운 HTML요소나 속성 추가, 제거 가능

• 자바스크립트는 HTML 문서의 모든 HTML요소, 속성 변경 가능

• 자바스크립트는 모든 CSS스타일 변경 가능

• 자바스크립트는 새로운 HTML이벤트를 추가하고 모든 이벤트에 반응할 수 있음

 

*XML(Extensible Markup Language):

• HTML과 비슷한 문자 기반의 마크업 언어임

• 그러나 HTML과 달리 데이터를 저장하고 전달할 목적으로만 만들어짐

• XML의 태그는 사용자가 직접 정의 함

• 확장성이 좋고 유니코드 문자로만 이루어짐

 

DOM의 종류

1. Core DOM: 모든 문서 타입ㅇㄹ 위한 DOM모델

2. HTML DOM: HTML 문서를 위한 DOM 모델

3. XML DOM: XML문서를 위한 DOM 모델

 

주요 DOM 데이터타입

• document: 트리의 root부분에 해당하는 root document object 자체

• element: DOM API에 의해 반환된 요소 또는 node를 의미함

• nodeList: 요소의 배열, index를 통해 접근 가능함

• attribute: DOM에서 요소와 같은 nodes임

• namedNodeMap: array와 유사하지만 name 또는 index에 의해 접근 가능함

• childNodes: 요소의 자식 node의 nodeList 반환

• firstChild: 요소의 첫 번째 자식 node를 반환

• firstElementChild: 첫 번째 자식 요소를 반환

• parentElement: 요소의 부모 요소 반환

• nextSibling: 동일한 node tree레벨에서 다음 node를 반환

• nextElementSibling: 동일한 node tree레벨에서 다음 요소 반환

 

주요 DOM 조작 메소드

• removeChild(): 요소의 자식 node 제거

• appendChild(): 마지막 자식 node로 자식 node를 요소에 추가

• insetBefore(): 기존 자식node 앞에 새 자식 node를 추가

• cloneNode(): node를 복제

• replaceChild(): 요소의 자식 node 바꿈

• closest(): 상위로 올라가면서 가장 가까운 요소 반환

• innerText: 지정된 node와 모든 자손의 텍스트 내용을 설정 혹은 반환

• innerHTML: 지정된 요소의 내부 html을 설정하거나 반환

• insertAdjacentHTML(): HTML로 텍스트를 지정된 위치에 삽입