iWiz ShareBase

IT Specialist 윤태현의 iWiz ShareBase는 IT뿐 아니라 각종 잡다한 지식들을 함께 나누는 지식공유 커뮤니티입니다.

iWiz,ShareBase,윤태현,Java,JSP,EJB,IT,정보기술,웹프로그래밍,PHP,ASP,DBMS,MySQL,서버,네트워크,server,network,WAS,웹애플리케이션,블로그,blog,웹서버,DB,오라클,oracle,mysql,JRun,웹로직,톰캣,tomcat,아파치,자동차,EF쏘나타,로또 6/45

갤러리 Pixelgrapher.com | 로또 6/45 번호생성 및 통계 데이터 | 전체기사보기 | 전체글 #1 | 전체글 #2 | 전체글 #3 | 전체글 #4 | 전체글 #5 | 전체글 #6 | 전체글 #7 | 전체글 #8 | 전체글 #9 | 전체글 #10 |
HOME iWiz
ShareBase
Remember 0523 & 0818
지식은 나눌수록 커집니다 - iWiz's ShareBase
웹프로그래밍(기타) PHP, ASP, Perl, CGI 등 각종 웹프로그래밍에 관한 자료들입니다.


  iWiz(2004-01-04 22:54:26, Hit : 5783, Vote : 43
 http://www.wz.pe.kr

JavaScript에서 브라우져 종류 판독 및 브라우져에 따른 DOM 처리


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 기능에서 오퍼를 등록할 카테고리를 선택하는 부분에서 사용하였으니, 혹 나중에 실제 구현된 코드가 필요하시면 해당 소스를 참조하시기 바랍니다.




62   mod_throttle 모듈을 이용한 사용자 트래픽 제어  iWiz 2006/06/22 8850 0
61   Tomcat-Apache using JK2 connector  iWiz 2004/03/21 6140 41
60   RedHat 9.0에서의 JRun JSP 컴파일러의 문제점  iWiz 2004/01/04 5329 50
59   RedHat 9.0에서의 JRun-Apache 커넥터의 문제점  iWiz 2004/01/04 5021 48
58   JRun 4.0의 튜닝 관련 옵션  iWiz 2004/01/04 5758 68
57   JRun 4.0의 Activity 모니터링 방법  iWiz 2004/01/04 4736 57
56   JRun4.0: DataSource 커넥션풀 관련 옵션 [4]  iWiz 2004/01/04 6487 46
55   JRun에서 JSP 컴파일시 java 파일 생성하기  iWiz 2004/01/04 7736 63
54   JRun의 실제 서비스 운영시 고려사항  iWiz 2004/01/04 6127 44
53   수정된 인터넷 익스플로러에서 상호작용 ActiveX 컨트롤 활성화 가이드  iWiz 2006/03/03 8144 4
52   HTML 특수기호 엔터티(Entity) 테이블 [2]  iWiz 2006/03/03 13815 2
51   웹사이트의 새로운 혁명 Ajax [13]  iWiz 2005/11/22 5663 6
50   MSN 메신저 친구 자동등록 스크립트  iWiz 2004/10/12 6029 35
49   JavaScript MD5 해쉬 생성 함수  iWiz 2004/01/07 8819 35
48   JavaScript로 만든 진법변환 및 보수계산기 [4]  iWiz 2004/01/04 156478 51

1 [2][3][4][5]
 

Copyright 1999-2023 Zeroboard / skin by zero
iWiz ShareBase, ⓒCopyleft by iWiz.  For more information contact .
본 웹사이트에 게시된 이메일 주소가 전자우편 수집 프로그램이나 그 밖의 기술적 장치를 이용하여 무단으로 수집되는 것을 거부하며, 이를 위반시에는 정보통신망법에 의해 형사처벌됨을 유념하시기 바랍니다. [게시일 2004. 1. 31]