스콧 민즈, XML in a Nutshell의 공동 저자
2000년 11월 13일 DOM Level 2가 공식적인 W3C(
World Wide Web Consortium)의 권고안(recommendation)이 되었다. DOM Level 1에서 발생한 몇 가지 문제를 수정했을 뿐만 아니라, XML 권고안의 이름공간(Namespace)도 지원한다. 이 글에서는 DOM을 처음 접하는 독자에게는 DOM(Document Object Model)에 대해 포괄적으로 소개하며, DOM Level 1에 익숙한 프로그래머에게는 쉽게 Level 2의 특성을 익힐 수 있도록 할 것이다.
DOM Core 권고안의 최신 버전은 W3C의 웹 사이트에서 볼 수 있다.
DOM이란?
DOM은 클라이언트 애플리케이션이 문서의 컨텐츠를 수정할 수 있도록 XML 파서(parser)에서 사용하는 표준 객체 인터페이스이다. 이 인터페이스에서는 계층 트리 구조의 원 문서에서 생성된 모든 정보에 접근할 수 있다. 문서 구조는 다음과 같은 특화된 인터페이스 중 한 가지로 나타난다:
- Document
- Attr
- Element
- Text
- Comment
- CDATASection
- DocumentType
- Notation
- Entity
- EntityReference
- ProcessingInstruction
위의 특화된 인터페이스에는 노드 인터페이스가 제공하는 기본적인 속성과 메소드가 있으며, 특정 XML 문서 아이템과 연관 있는 고유한 정보에 접근할 수 있다(예를 들면, ProcessingInstruction 인터페이스는 타겟과 데이터 속성을 가진다). 이렇게 해서 나타난 전문 노드는 “리스트의 리스트” 구조로 저장되어, 부모-자식(parent-child) 링크나 형제 (sibling) 링크를 가지게 된다. 다음과 같은 문서를 예로 들 수 있다:
38.9-77.03
다음에 나오는 DOM 노드 트리를 기억해 두자:
이러한 구조는 노드 인터페이스를 통해 부모, 자식, 그리고 형제 링크 사이를 옮겨 다닐 수 있다.
이름공간 지원
DOM Level 2에 새로 부가된 특성 중 가장 중요한 것은 XML 권고안의
이름공간을 지원할 수 있다는 것으로, XML 권고안은 1999년 1월 14일에 승인되었다. 이름공간을 이용하면, 하나의 문서에 여러 개의 XML 용어를 섞어서 사용할 수 있다. 가령 XHTML 페이지에
엘리먼트가 있는 책의 리스트가 있으며, XHTML 페이지에도 <title>이란 엘리먼트가 있다고 해 보자. 이름공간이 없다면 하나의 문서 안에서 <title> 엘리먼트를 구별할 수 없다. 이름공간이 있어야만 접두사(prefix)를 사용하여, 각각 엘리먼트 태그가 이름공간 URI(Uniform Resource Identifier)와 결합할 수 있는 것이다.
<blockquote>
<p><prefix:localpart></p>
</blockquote>
접두사는 태그 이름의 URI를 사용하는 단축키이다. 접두사를 사용하면 입력하는 시간을 많이 줄일 수 있으며, 대부분의 URI에는 유효한 XML 이름 토큰이 없다. 그래서 접두사를 사용하기 전에는 특별한 xmlns 속성 접두사를 사용하여 정의를 해 두어야 한다. 다음의 예를 보자:
<blockquote>
<p><tagname xmlns:svg="http://www.w3.org/2000/svg"></p>
</blockquote>
xmlns:svg 속성을 파싱하고 나면, svg: 접두사는 태그와 속성을 가지게 된다. DOM Level 1은 이름공간이 지원하지 않기 때문에 DOM으로 접두사가 있는 특정 태그의 이름을 알아내는 것은 애플리케이션의 몫이었다. DOM Level 2는 Level 1 메소드에서 새로운 이름공간인식 버전을 제공해서 이름공간을 지원한다:
<p align="center">
<img src="http://network.hanbitbook.co.kr/image/dom_fig2.jpg">
</p>
각각의 새로운 이름공간 메소드는 namespaceURI라는 매개 변수를 더해서 메소드의 기본 버전을 확장한다. 단순히 태그 이름을 지나치는 것뿐만 아니라, 권한이 부여된 이름(이름공간 접두사가 있는 이름), 그리고 관련 URI를 지나치는 것도 가능하다. DOM은 분명히 필요한 xmlns 속성을 삽입한다.
<font class="fnt11"><b>검색</b></font>
속성과 엘리먼트를 찾아내는 메소드 역시 이름공간 인식 버전을 가지고 있는데, 이를 이용하면 조회하고 있는 XML 애플리케이션과 일치하는 태그와 속성만을 찾아낸다. 앞에서 예로 들었던 XHTML 문서를 예로 들어 보자. 이 문서에는 <title>이라는 엘리먼트가 있는 책의 리스트가 있다. 엘리먼트 인터페이스의 이름공간을 인식하는 getElementsByTagNameNS()메소드를 사용하면, 다음과 같은 이름공간 URI를 포함하는 적정한 <title> 태그를 찾아 낼 수 있다:
<blockquote>
Element elXHTMLTitle = document.<br />
getElementsByTagNameNS("http://www.w3.org/1999/xhtml", "title");
</blockquote>
이와 똑같은 과정으로 특정 애플리케이션에 속하는 속성을 찾을 수 있다.
<font class="fnt11"><b>수정하기</b></font>
DOM Level 1 Core의 큰 한계중 한 가지는 프로그램에 입각해서 새로운 빈 문서 인스턴스를 만들 수 없다는 것이었다. 문서 객체의 인스턴스를 얻는 유일한 방법은 지금 있는 문서를 파싱하는 것인데, 그러면 다른 애플리케이션이 제대로 작동하지 않을 수도 있다. DOMImplementation 인터페이스에는 createDocument()와 createDocumentType()이라는 두 가지 메소드가 있다. 이를 이용해서 새로운 빈 문서와 관련 DTD(문서 타입 정의)를 생성한다. 그리고 DTD는 다큐먼트 인터페이스로 조작한다. 하지만 아직도 DocumentType 인터페이스에서 DTD를 수정하지는 못하기 때문에, DOM만을 사용하여 완벽한 특성을 지니는 문서 편집기를 구현하는 것도 아직은 불가능하다.
<font class="fnt11"><b>한번에 여러 문서 띄우기</b></font>
DOM API의 기본 개념 중 하나는 부모 문서 밖에는 어떤 문서 트리(하나의 노드가 있는 객체 인스턴스)도 없다는 것이다. 한 번에 여러 개의 문서를 열어 놓을 수는 있지만, 하나의 트리에서 노드를 제거하고 열어 놓은 다른 문서로 삽입하는 것은 불가능하다. Level 2는 다큐먼트 인터페이스의 새로운 importNode()를 제공한다. 임포팅하는 대신에 소스 다큐먼트의 명시된 부분을 복사해서 타겟 문서 내에서 사용할 수 있도록 한다.
<font class="fnt11"><b>맺음말</b></font>
Level 2에서는 이름공간과 문서 편집을 지원한다는 것 외에도 Level 1에서 발생하는 큰 문제(특정 Attr 노드가 속하는 엘리먼트를 결정할 수 없는 것과 같은 문제)를 많이 수정했다. DOM이 최종 목표에 도달하려면 아직 갈 길이 멀지만, XML의 인기가 급상승하고 있기 때문에 새로운 특성에 대한 요구도 함께 증가할 것이다. 하지만 XML의 인기와 새로운 애플리케이션과 함께 사용할 수 있는 구현의 수도 많다는 것을 감안하면, 앞으로 DOM은 모든 XML 프로그래머의 툴킷의 중요한 일부가 될 것이다. </div>
<!-- 좋아요 버튼 -->
<div class="btn_area">
<div class="btn_like" ><a href="javascript:setLike('CMS6383509511','');">좋아요</a></div>
</div>
<!-- 태그 정보 영역 -->
<div class="tag_area"><span>TAG : </span></div>
<!-- //태그 정보 영역 -->
<!-- //콘텐츠 영역 -->
</div>
<!-- // 콘텐츠 board 영역 -->
<!-- 이전 다음 -->
<div class="view_page_move">
<p class="vpml"><span>이전 글 : </span>
<a href="./category_view.html?cms_code=CMS4910479518&cate_cd=001">PPP나 케이블 모뎀으로 인터넷에 연결하기(1)</a>
</p>
<p class="vpmr"><span>다음 글 : </span>
<a href="./category_view.html?cms_code=CMS9586501714&cate_cd=001">SSH 관련 10가지 질문 (1부)</a>
</p>
</div> <!-- //이전 다음 -->
<!-- 관련콘텐츠 -->
<!-- //관련콘텐츠 -->
<!-- 홈페이지 댓글 모듈 영역 -->
<div class="detail_reply_area">
<!-- 댓글 리스트 -->
<div id="cms_reply_div"></div>
<!--// 댓글 리스트 -->
<!-- 댓글 입력 -->
<form name="re_frm" id="re_frm" method="post">
<input type="hidden" id="fk_m_idx" name="fk_m_idx" value="">
<input type="hidden" id="fk_m_name" name="fk_m_name" value="">
<input type="hidden" id="fk_cms_code" name="fk_cms_code" value="CMS6383509511">
<div class="reply_form">
<fieldset>
<legend>댓글 입력</legend>
<label><textarea name="comment" id="comment" class="i_textarea"></textarea></label>
<label><button type="button" name="" value="작성" class="btn_repl" onclick="cms_reply_data('ins','');">댓글 작성</button></label>
</fieldset>
</div>
</form>
<!--// 댓글 입력 -->
</div>
<script>
function cms_reply_frm(str,re_idx,re_com_idx,status){
var result_postdata= {
str:str,
re_idx : re_idx ,
re_com_idx:re_com_idx
}
$.ajax({
type:"post",
url: "/channel/cms_reply_frm.php",
data:result_postdata,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success: function(data){
//alert(data);
if(str == "mod"){
$("#mod_com_div_"+re_idx).html();
$("#mod_com_div_"+re_idx).html(data);
}
if(str == "re_mod"){
$("#mod_recom_div_"+re_com_idx).html();
$("#mod_recom_div_"+re_com_idx).html(data);
}
}
});
}
//댓글달기
// @str:상태값 @idx: 댓글idx
function cms_reply_data(str,idx){
var fk_m_idx = $("#fk_m_idx").val();
var fk_m_name = $("#fk_m_name").val();
var fk_cms_code = $("#fk_cms_code").val();
// var comment = $("#comment").val();
// var re_comment = $("#re_comment_"+rd_num).val();
// var mod_comment = $("#mod_comment").val();
// var mod_re_comment = $("#mod_re_comment_"+idx).val();
var comment = $("#comment");
var re_comment = $("#re_comment_"+idx);
var mod_comment = $("#mod_comment");
var mod_re_comment = $("#mod_re_comment_"+idx);
if(str=="ins"){ comment = comment;
}else if(str=="re_ins"){comment = re_comment;
}else if(str=="mod"){comment = mod_comment;
}else if(str=="re_mod"){comment = mod_re_comment;
}
if(!fk_m_idx){alert("로그인후 댓글을 작성하실수있습니다.");return; }
if(str == "ins"||str == "mod"||str == "re_mod"||str == "re_ins"){
if(!comment.val()){
alert("내용을 입력해주세요.");comment.focus(); return;
}
}else if(str == "del" || str == "re_del"){
if(!confirm(" 삭제 후 데이터는 복구되지 않습니다. \n 해당 항목을 삭제 하시겠습니까? ")){ return; }
}
var comment_val = comment.val();
var result_postdata= { str:str, fk_m_idx : fk_m_idx, fk_m_name : fk_m_name, fk_cms_code : fk_cms_code,
comment:comment_val ,idx:idx
}
$.ajax({
type:"post",
url: "/channel/cms_reply_proc.php",
data:result_postdata,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success: function(data){
alert($.trim(data));
cms_reply_list('CMS6383509511');
/*
if(str == "mod_f"){
$("#re_"+div_n+"_"+div2_n).html("");
$("#re_"+div_n+"_"+div2_n).html(data);
}else{
alert(data.trim());
comment_list( fk_hbr_idx,div_n); //댓글 리스트
}
*/
}
});
}
//리뷰 댓글 리스트 :: 리뷰 idx , div_num
function cms_reply_list(cms_code){
$.ajax({
type:"post",
url: "/channel/cms_reply_list.php",
data: { cms_code : cms_code},
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success: function(data){
$("#comment").val('');
$("#cms_reply_div").html(data);
}
});
}
//답글 처리 버튼
function recom_frm(str,num){
if(str=="show"){
$("#recom_div_"+num).show();
$("#re_btn_"+num).html("");
$("#re_btn_"+num).html("<a href=\"javascript:recom_frm('hide','"+num+"');\">답글취소</a>");
}else if(str=="hide"){
$("#recom_div_"+num).hide();
$("#re_btn_"+num).html("");
$("#re_btn_"+num).html("<a href=\"javascript:recom_frm('show','"+num+"');\">답글</a>");
}
}
cms_reply_list('CMS6383509511');
</script> <!-- //홈페이지 댓글 모듈 영역 -->
<div class="btn_area_board">
<div class="left"><a href="/channel/category/category_list.html">목록</a></div>
</div>
</div>
<!-- //상세 left 영역 -->
<!-- 상세 right 영역 -->
<div class="network_view_wrap_r">
<!-- 배너영역 -->
<div class="bn_area" style="padding:0; border:1px solid #dddddd;">
<a href="https://www.hanbit.co.kr/store/course/main.html" target="_self">
<img src="/data/banner/20250221115725_ban_pc_img_thumb.jpg" alt="" ></a>
</a>
</div>
<!-- //배너영역 -->
<!-- 편집자 Choice -->
<!-- //편집자 Choice -->
<!-- 최신콘텐츠 -->
<div class="newest_con">
<p class="tit">최신 콘텐츠</p>
<ul>
<li><a href="/channel/category/category_view.html?cms_code=CMS7698604458" target="_blank" title="새창열기">[독자 인터뷰] 이 책은 딥러닝 분야...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS8606178007" target="_blank" title="새창열기">왜 웹 스크레이핑을 써야 할까...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS5333743680" target="_blank" title="새창열기">[회의록과 보고서 작성 지옥에서 ...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS7525746308" target="_blank" title="새창열기">[파이썬 공부하면 뭐하나?] 2탄. 비...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS8271699833" target="_blank" title="새창열기">SF영화같은 세계에서 딥러닝이 할 ...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS4489193904" target="_blank" title="새창열기">[편집 후기] 양자 컴퓨터, 어렵다고...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS2603794672" target="_blank" title="새창열기">아인슈타인도 이해하는 양자 컴...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS9619039659" target="_blank" title="새창열기">전세계는 왜 양자 컴퓨터에 열광...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS7587932842" target="_blank" title="새창열기">게으른 천재의 선물: 귀도 반 로섬...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS7274267164" target="_blank" title="새창열기">비전공자, 개발자 따라잡기</a></li>
</ul>
</div> <!-- //최신콘텐츠 -->
<!-- 인기콘텐츠 -->
<div class="newest_con">
<p class="tit">인기 콘텐츠</p>
<ul>
<li><a href="/channel/category/category_view.html?cms_code=CMS4695374004" target="_blank" title="새창열기">[CS기술 면접] 자주 출제되는 컴퓨...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS7003473664" target="_blank" title="새창열기">개발자를 위한 코딩 파트너, 효과...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS7885156269" target="_blank" title="새창열기">개발자를 위한 커뮤니케이션 도구 ...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS6968709109" target="_blank" title="새창열기">[2025 수능 국어 지문 출제] 디퓨...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS2956113027" target="_blank" title="새창열기">[개발자 CS 기술 면접] 2. 운영체...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS4148158442" target="_blank" title="새창열기">[알고리즘] 배열과 연결 리스트 중 ...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS9960904389" target="_blank" title="새창열기">[취업/이직] 경력별 개발자 면접 준...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS2710355362" target="_blank" title="새창열기">머신러닝 엔지니어라면 놓칠 수 없...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS8987113281" target="_blank" title="새창열기">[당신에게는 어텐션이 필요할 뿐이...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS3623767314" target="_blank" title="새창열기">인공지능이 인간화 되는 것일까? 인...</a></li>
</ul>
</div> <!-- //인기콘텐츠 -->
</div> <!-- //상세 right 영역 -->
</div>
<!-- //네트워크 상세 wrap -->
</div>
<!-- //Contents -->
<!-- Footer -->
<link rel="stylesheet" href="/css/new/common-footer.css">
<footer class="main-footer">
<div class="footer-contents">
<!-- 상단 메뉴 -->
<div class="footer-menu">
<ul>
<li><a href="https://www.hanbit.co.kr/publisher/" target="_blank">회사소개</a></li>
<li><a href="https://www.hanbit.co.kr/member/use_agreement.html" target="_self">이용약관</a></li>
<li><a href="https://www.hanbit.co.kr/member/privacy_policy.html" target="_self">개인정보처리방침</a></li>
<li><a href="https://www.hanbit.co.kr/publisher/career.html" target="_blank">채용안내</a></li>
<li><a href="https://bit.ly/4h0aWZs" target="_blank">강사/연사 모집</a></li>
<li><a href="https://www.hanbit.co.kr/publisher/write.html" target="_blank">기획/원고 모집</a></li>
<li><a href="https://www.hanbit.co.kr/support/notice_list.html" target="_self">공지사항</a></li>
<li><a href="https://www.hanbit.co.kr/support/help_info.html" target="_self">고객센터</a></li>
</ul>
<!-- SNS 링크 -->
<div class="footer-sns">
<a href="https://www.facebook.com/hanbitmedia" target="_blank" title="페이스북(새창)">
<img src="/css/images/new/footer/logo_Facebook.svg" alt="페이스북">
</a>
<a href="https://www.youtube.com/hanbitmedia93" target="_blank" title="유튜브(새창)">
<img src="/css/images/new/footer/logo_youtube.svg" alt="유튜브">
</a>
<a href="https://www.instagram.com/developer_recipe/" target="_blank" title="인스타그램(새창)">
<img src="/css/images/new/footer/logo_Instagram.svg" alt="인스타그램">
</a>
</div>
</div>
<!-- 한빛 정보 -->
<div class="footer-about">
<p class="foot-about-title">한빛미디어(주)</p>
<div class="foot-about-top">
<p id="foot-about-item">대표자: 김태헌, 전태호</p>
<span class="footer-about-divider">|</span>
<p>사업자 등록번호: 220-81-05665 <a href="http://www.ftc.go.kr/bizCommPop.do?wrkr_no=2208105665"target="_blank"> [확인]</a></p>
<span class="footer-about-divider">|</span>
<p>통신판매업 신고번호: 2017-서울서대문-0671호</p>
<span class="footer-about-divider">|</span>
<p>평생교육시설 신고번호: 제2023-24호</p>
</div>
<div class="foot-about-bottom">
<p>주소: 서울 서대문구 연희로2길 62</p>
<span class="footer-about-divider">|</span>
<p>이메일: support@hanbit.co.kr</p>
<span class="footer-about-divider">|</span>
<p>전화: 02-325-5544</p>
<span class="footer-about-divider">|</span>
<p>호스팅제공자: 호스트센터(주)</p>
</div>
<div class="new-copyright">Copyright ©2025 HANBIT MEDIA,Inc. All rights reserved.</div>
</div>
</div>
</footer>
<!-- //푸터 -->
<!-- 공통 JS 호출 -->
<script type="text/javascript" src="/js/common.js"></script>
<!-- //공통 JS 호출 -->
</body>
</html> 