|
HTML 페이지를 만들다보면 JavaScript를 이용해 클라이언트 사이드 스크립트를
작성하는 경우가 종종 있습니다. 이때 브라우져마다 구현 방법이 조금씩 달라
애를 먹는데, 특히 영문 사이트 등 넷스케이프 유저를 고려한 사이트의 제작시 적지않은
시간이 소요됩니다.
JS의 문이나 메소드 등 native 코드들은 브라우져에 영향을 별로 받지 않지만,
브라우져마다 DOM의 구현이 달라 JS에서 HTML 문서에 접근하는데 있어 차이가 납니다.
지금까지는 대개 navigator.appName 등의 속성을 가져와 이름에 따른 분기를 하는
것이 일반적이었지만, 이보다 더 정확하고 간결하게 판독하는 방법은 어떤 방식으로
DOM을 구현하는지를 감지해, 그 방식에 따라 분기하는 것이 더 맞는 방식 같습니다.
브라우져에서 DOM을 구현하는 방식은 대체로 세가지 방식으로 나눌 수 있습니다.
(아래 명칭은 공식명칭이 아니라 제 나름대로 갖다붙인 것입니다)
- W3C DOM : W3C의 표준 DOM 규격으로, 이를 구현하는 브라우져로는
IE6와 Nescape 6 이상의 버전 등의 최신 버전의 브라우져가
있습니다.
- MS DOM : MSIE 4.x/5.x/6.x에서 사용하는
Object Model 입니다. 6.0 이상은 MS DOM과 함께 W3C DOM도 지원하지만, 그 5.x
이하 버전은 MS의 DOM에 따라 웹문서에 접근해야 합니다.
- Netscape DOM : Netscape Navigator 4.x
대에서 사용하던 DOM 입니다. 넷스케이프 역시 6.X 버전대부터는 W3C DOM도
함께 지원하고 있습니다.
실제로 클라이언트 브라우져가 어떤 DOM을 사용하느냐를 체크하는 방법은 다음과
같습니다.
|
if
(document.getElementById) {
....
//
W3C 표준 DOM 코드
....
}
else if (document.all) {
...
//
IE 4/5 DOM 코드
...
}
else if (document.layers) {
...
//
Netscape Navigator 4 DOM
코드
...
}
else {
...
//
DOM을 지원하지 않는 브라우져를
위한 코드
...
}
|
그럼 예제를 보여드리겠습니다. 이것은 본문중의 <span id="domtest"></span>
라는 태그가 있고 JavaScript를 통해 <span> ~ </span> 사이에 Hello
World라는 텍스트를 집어넣는 코드입니다.
|
if
(document.getElementById) { // W3C 표준 DOM 호환 코드
var
objHello = document.createTextNode("Hello
World"); // 텍스트 노드 생성
var
objEntry = document.getElementById("domtest");
// 텍스트가 들어갈 태그
if
(objEntry.hasChildNodes()) { // 다른 자식노드가 있으면 그 노드를
대체
var
objChild = objEntry.firstChild; // 첫번째 노드 얻기
objEntry.replaceChild(objHello,
objChild); // 첫번째 노드를 대체
}
else { // 자식 노드가 없으면 새 노드 추가
objEntry.appendChild(objHello);
// 노드 추가하기
}
// if
} else if (document.all)
{ // MS DOM 호환 코드
document.all['domtest'].innerText
= "Hello World"; // innerText에
글자 넣기
}
else if (document.layers) { // Netscape DOM 호환
코드
var
objEntry = document.domtest;
objEntry.document.write("Hello
World");
}
|
보시다시피 IE가 가장 간단하고 이해가 쉬운 반면, W3C의 DOM이 가장 까다롭고
복잡합니다. 그러나 표준이기 때문에 영문사이트에서 JavaScript를 통해 Document에
접근할 때는 꼭 고려해야할 사항이겠죠.
사용자들의 대부분이 MSIE나 netscape를 불문하고 최신 브라우져를 사용하게 된다면
W3C DOM 하나만 고려하면 될 듯 합니다만, 현재 MSIE 5.X 대를 사용하는 사용자가
많습니다. (Netscape 4.x는 나온지도 오래되었고 호환성 부분이나 W3C 표준 준수
부분에도 문제가 많기 때문에 100% 모두 고려해주기는 힘들듯 합니다)
아무튼 위의 코드는 현재 만들고 있는 Post an Offer 기능에서 오퍼를 등록할
카테고리를 선택하는 부분에서 사용하였으니, 혹 나중에 실제 구현된 코드가 필요하시면
해당 소스를 참조하시기 바랍니다.
|
