문서 객체 모델 (DOM)
문서 객체 모델(Document Object Model, DOM)은 말 그대로 웹 페이지 내의 모든 콘텐츠를 객체로 나타내 주는 것이다.
HTML이나 XML 등의 문서를 객체로 표현할 때 사용되는 API이다.
간단하게 생각하면 웹 페이지를 document라고 부르고, document를 자유롭게 다루기 위해서 객체화 하고자 구현된 개념이 결국이 DOM이라고 생각할 수 있겠다.
HTML, XML 태그와 글자, 속성 등 document의 담겨있는 모든 요소들을 하나하나를 객체화 한 단위를 가리켜 노드(Node)라고 부른다.
JS, Java, C, C# 등 다양한 언어에서 DOM API를 제공한다.
XMLHttpRequest 객체는 응답 텍스트 대신 XML 응답 결과를 사용할 수 있다. 이때, DOM API를 사용해서 Server가 생성한 XML로부터 데이터를 추출 가능하다.
결국, DOM은 웹 페이지를 객체화 한 개념이고 이 웹페이지의 가장 상단 진입점이 바로 document 객체이다.
document 객체는 전역 객체인 window 객체의 바로 아래 있는데, window 객체는 앞에 window를 생략해도 되기 때문에 일반적으로는 document에 바로 접근해서 메서드나 프로퍼티들을 활용한다.
1
2
window.document
document // window는 생략될 수 있다.
Document 객체
window객체가 브라우저 창을 대변하는 것이라면 document 객체는, 브라우저 내에서 컨텐츠를 보여주는 웹 페이지 자체를 대변한다고 할 수 있다.
간단하게 웹 페이지가 document고, 이를 객체화한 것이 document 객체라고 생각해볼 수도 있겠다.
Document 객체의 Property
document 객체를 활용하면 웹페이지의 상태와 모든 HTML 태그들에 접근할 수 있는데, 가장 간단하게 프로퍼티 네임에 태그 이름을 입력하면 해당 태그에 접근이 가능하다.
1
2
3
4
5
6
7
8
document.documentElement // document를 제외하고 DOM 트리 꼭대기에 있는 문서 노드인 <html> 태그 반환
document.head // <head> 태그 반환
document.title // <title> 태그 반환
document.body // <body> 태그 반환
document.links // href 속성이 있는 <a> 태그 반환
document.images // <img> 태그 반환
document.forms // <form> 태그 반환
document.scripts // <script> 태그 반환
웹페이지의 정보를 담은 property들도 있다.
1
2
3
4
5
6
7
8
9
10
document.doctype // 웹 페이지의 문서 형식을 반환
document.readyState // 웹 페이지의 로딩 상태를 반환
document.documentURI // 웹 페이지의 URI를 반환
document.baseURI // 웹 페이지의 절대 URI를 반환
document.URL // 웹 페이지의 완전한 URL 주소를 반환
document.referrer // 링크(linking)되어 있는 문서의 URI를 반환
document.domain // 웹 페이지가 위치한 서버의 도메인을 반환
document.cookie // 웹 페이지의 쿠키를 반환
document.lastModified // 웹 페이지의 마지막 갱신 날짜 및 시간을 반환
document.inputEncoding // 웹 페이지의 문서 인코딩 형식을 반환
HTML 태그 (노드) 선택하기
메서드들을 사용하면 다양한 방법으로 웹 페이지 내의 태그들에 접근할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 파라미터로 전달한 태그이름을 가진 모든 태그들을 반환(배열)
document.getElementsByTagName(태그이름)
// 파라미터로 전달한 ID를 가진 태그를 반환
document.getElementById(아이디)
// 파라미터로 전달한 클래스 이름을 가진 모든 태그들을 반환(배열)
document.getElementsByClassName(클래스이름)
// 파라미터로 전달한 name 속성을 가진 태그를 반환
document.getElementByName(name속성값)
// 파라미터로 전달한 선택자에 맞는 첫 번째 태그를 반환
document.querySelector(선택자)
// 파라미터로 전달한 선택자에 맞는 모든 태그들을 반환(배열)
document.querySelectorAll(선택자)
html, xml 문서를 처리하기 위한 DOM 요소의 속성은 다음과 같다.
1
2
3
4
5
6
7
document.childNodes // 현재 요소의 자식을 배열로 표현
document.firstChild // 현재 요소의 1번째 자식
document.lastChild // 현재 요소의 마지막 자식
document.nextSibling // 현재 요소와 바로 다음 요소를 의미
document.nodeValue // 해당 요소의 값을 읽고 쓸 수있는 속성을 정의 (=data)
document.parentNode // 해당 요소의 부모 노드
document.previousSibling //현재 요소와 바로 이전의 요소를 의미