웹페이지를 쉽게 업데이트 해볼까?
▶알림◀
▶본 문서는 한빛미디어의 Head Rush Ajax 서적을 참고하여 작성하였습니다.
▶본 문서에서 참고한 웹 사이트는 아래와 같습니다.
위키백과 ( http://ko.wikipedia.org)
모질라 웹 사이트 ( https://developer.mozilla.org/ko/DOM)
------------
돔이 무엇일까 ? DOM . 아 왜 거 ~ 일본에 있는 돔 구장 말하는 거 아닙니까~~~~!?
아니다.
문서 객체 모델(DOM; Document Object Model)은 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. DOM은 플랫폼/언어 중립적으로 구조화된 문서를 표현하는 W3C의 공식 표준이다. DOM은 또한 W3C가 표준화한 여러 개의 API의 기반이 된다.
DOM은 HTML 문서의 요소(엘레멘트; element)를 제어하기 위해 웹 브라우저에서 처음 지원됐다. DOM은 동적으로 문서의 내용, 구조, 스타일에 접근하고 변경하는 수단이었다. 브라우저 사이에 DOM 구현이 호환되지 않음에 따라, W3C에서 DOM 표준 규격을 작성하게 되었다.
DOM은 문서의 기반이 되는 데이터 구조에 제한을 두지 않는다. 잘 구조화된 문서는 DOM을 사용하여 트리 구조를 얻어낼 수 있다. 대부분의 XML 해석기와 XSL 처리기는 나무 구조의 이용에 대응해 개발되었다. 이 같은 구현에서는 문서의 전체 내용이 해석되어 메모리 저장되어야 한다. 때문에 DOM은 문서 요소가 임의적으로 접근되고 변경할 수 있어야 하는 응용 프로그램에 가장 적합하다. 한 번 해석 시 단 한 번의 선택적 읽기/쓰기가 이루어지는 XML 기반 응용 프로그램에서, DOM은 메모리에 상당한 부하를 가져온다. 이 경우처럼 속도와 효율적인 메모리 소비가 중요한 상황일 경우 SAX 모델이 장점을 가진다.
라고 위키백과에서는 말하고 있습니다.
(출처 : http://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8)
▶웹 페이지를 한번쯤 만들어 보았다면, 나중에 업데이트를 하거나 어떤 내용을 추가할 때, 레이아웃 및 디자인 관점에서 상당한 에로(19)를 경험해 보았을 것입니다. 짜증 100% 다들 아시죠? 아시리라 믿을께요. 전 아직 잘........
▶그래서, DOM 이라는 것이 제시되었는데, 이것은 HTML 문서를 잘 관리할 수 있도록, 문서에 대해 구조적인 표현(트리 : 나무)을 제공합니다. 따라서 , 쉽게 문서에 제시된 스크립트나 프로그래밍 언어등을 알 수 있습니다.
▶자바스크립트에서도 DOM을 사용할 수 있는데, 예는 다음과 같습니다.
function updatePage(){
var newTotal = request.responseText;
var boardsSoldE1 = d0cument.getElementById("boards-sold");
var cashE1 = d0cument.getElementById("cash");
.....생략.....
}
위에서 d0cument 객체가 있는데, 자바 스크립트에서 웹 브라우저가 만든 DOM 에 접근할 수 있도록 하는 수단입니다.
▶위의 예제에서는 자바스크립트를 언급했지만, 사실. 이 DOM은 어떠한 언어에서도 사용이 가능하고, 또한 하나의 일관된 API로부터 문서의 구조적 표현을 만드는 것도 가능합니다. 우와 신기하지만, 뭔 소린진 아직 잘 모르겠어요.
업데이트 중