IT/모바일
스콧 민즈, 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)에서 사용하는 표준 객체 인터페이스이다. 이 인터페이스에서는 계층 트리 구조의 원 문서에서 생성된 모든 정보에 접근할 수 있다. 문서 구조는 다음과 같은 특화된 인터페이스 중 한 가지로 나타난다:
엘리먼트가 있는 책의 리스트가 있으며, 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.hanbitn.com/" target="_blank">
<img src="/data/banner/20240904165233_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=CMS7560430963" target="_blank" title="새창열기">개발자를 위한 수학 분야별 추천 ...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS2359486892" target="_blank" title="새창열기">[바닷속 딥러닝 어드벤처] 5부. 피...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS3783401104" target="_blank" title="새창열기">[바닷속 딥러닝 어드벤처] 4부. 제...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS8289480351" target="_blank" title="새창열기">[바닷속 딥러닝 어드벤처] 3부. DeZ...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS2551016804" target="_blank" title="새창열기">[바닷속 딥러닝 어드벤처] 2부. 상...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS6397502491" target="_blank" title="새창열기">[바닷속 딥러닝 어드벤처] 1부. 시...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS2758678476" target="_blank" title="새창열기">[챗GPT로 챗봇 만들기] 프롬프트 엔...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS7962220408" target="_blank" title="새창열기">플러터의 필수개념 이해하기 - 아키...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS1420013052" target="_blank" title="새창열기">TypeScript의 데이터 타입에 대해 ...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS5848159514" target="_blank" title="새창열기">쉽게 배우는 AWS : 클라우드 정의부...</a></li>
</ul>
</div> <!-- //최신콘텐츠 -->
<!-- 인기콘텐츠 -->
<div class="newest_con">
<p class="tit">인기 콘텐츠</p>
<ul>
<li><a href="/channel/category/category_view.html?cms_code=CMS4064858187" target="_blank" title="새창열기">[리뷰 함께 읽기] 100만원 마케팅,...</a></li>
<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=CMS5997817104" target="_blank" title="새창열기">파이썬 웹 프레임워크 비교 - D...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS8302568366" target="_blank" title="새창열기">여름은 성장의 계절, 개발자 성장...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS9625146475" target="_blank" title="새창열기">구글 스프레드시트의 날짜 형식 변...</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=CMS1166571063" target="_blank" title="새창열기">Redis(레디스) 서버 설치 및...</a></li>
<li><a href="/channel/category/category_view.html?cms_code=CMS9813408902" target="_blank" title="새창열기">2030년 AI 시장 전망 & 주목할 상용...</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=CMS8893081462" target="_blank" title="새창열기">원리부터 이해하는 도커 - 컨테이...</a></li>
</ul>
</div> <!-- //인기콘텐츠 -->
</div> <!-- //상세 right 영역 -->
</div>
<!-- //네트워크 상세 wrap -->
</div>
<!-- //Contents -->
<!-- Footer -->
<footer>
<!-- 공지사항 -->
<div class="foot_notice" style="height:6px;"></div> <!-- //공지사항 -->
<div class="foot_contents">
<!-- 하단 메뉴 -->
<div class="foot_menu">
<!-- added by coffin -->
<ul>
<li><a href="https://www.hanbit.co.kr/publisher/index.html" target="_blank">회사소개</a>(<a
href="https://www.hanbit.co.kr/publisher/index.html" target="_blank">KOR</a> | <a
href="https://www.hanbit.co.kr/publisher/index.html?lang=e" target="_blank">ENG</a>) • <a
href="https://www.hanbit.co.kr/publisher/contact.html?lang=k" 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/publisher/career.html" target="_blank">채용</a> • 입사지원 <a
href="mailto:jobs@hanbit.co.kr">jobs@hanbit.co.kr</a></li>
<li><a href="https://www.hanbit.co.kr/publisher/foreignrights.html" target="_blank">FOREIGN RIGHTS</a></li>
<li><a href="https://www.hanbit.co.kr/member/use_agreement.html">이용약관</a> • <a
href="https://www.hanbit.co.kr/member/privacy_policy.html"><strong>개인정보처리방침</strong></a></li>
<li><a href="https://www.hanbit.co.kr/sitemap/sitemap.html">사이트맵</a></li>
</ul>
</div>
<!-- //하단 메뉴 -->
<!-- SNS -->
<div class="foot_sns">
<!-- 데브레터 구독하기 -->
<div class="devletter_contet">
<div class="devletter_sub">
<span class="dev_header_img">데브레터 구독하기</span><a class="dev_sit_a" href="/devletter/" target="_blank"><span
class="dev_site_img">데브레터 보러가기</span></a>
</div>
<form class="subscribe_form" action="/devletter/dev_process.php" method="post">
<input type="hidden" id="g-recaptcha" name="g-recaptcha">
<fieldset class="subscribe_fiel">
<legend>구독서비스</legend>
<input type="text" placeholder="Your Email Address" name="user_email"></input>
<button type="submit" class="sub_btn"><span>구독</span></button>
</fieldset>
</form>
<div class="main_foot_sns">
<ul>
<li class="main_foot_facebook"><a href="https://www.facebook.com/hanbitmedia"
target="_blank"><span>페이스북</span></a></li>
<li class="main_foot_youtube"><a href="https://www.youtube.com/한빛TV" target="_blank"><span>유튜브</span></a>
</li>
<li class="main_foot_bolg"><a href="http://blog.hanbit.co.kr/" target="_blank"><span>블로그</span></a></li>
<li class="main_foot_naverpost"><a href="https://m.post.naver.com/hanbitstory"
target="_blank"><span>네이버포스트</span></a></li>
</ul>
</div>
</div>
<!-- 데브레터 구독하기 //-->
</div>
<!-- //SNS -->
<!-- 한빛 정보 -->
<div class="foot_about">
<div class="foot_about_area">
<p><strong>한빛출판네트워크</strong></p>
<p>(03785) 서울 서대문구 연희로2길 62</p>
<!-- <p>EMAIL : support@hanbit.co.kr</p> -->
<p>대표이사 : 김태헌, 전태호</p>
<p>사업자등록번호 : 220-81-05665 <a href="http://www.ftc.go.kr/bizCommPop.do?wrkr_no=2208105665"
target="_blank">[확인]</a></p>
<p>통신판매업신고 : 2017-서울서대문-0671호</p>
<p>호스팅제공자 : 호스트센터(주)</p>
<p>고객센터 : support@hanbit.co.kr <a href="/support/help_info.html">[바로가기]</a></p>
<!--//패밀리사이트-->
<div class="family_menu">
<div data-family-menu>
<span>관련사이트</span> <i class="family_icon" data-family-icon role="img"></i>
</div>
<ul data-family-menu-ul class="family_menu_ul" style="display:none;">
<li><a href="https://www.hanbit.co.kr/media/" target="_blank">한빛미디어<svg data-v-c1d21be8="" data-v-f12001e6=""
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink">
<g data-v-c1d21be8="" fill="none" fill-rule="evenodd">
<path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638"
transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path>
</g>
</svg></a></li>
<li><a href="https://www.hanbit.co.kr/academy/" target="_blank">한빛아카데미<svg data-v-c1d21be8="" data-v-f12001e6=""
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink">
<g data-v-c1d21be8="" fill="none" fill-rule="evenodd">
<path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638"
transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path>
</g>
</svg></a></li>
<li><a href="https://www.hanbit.co.kr/biz/" target="_blank">한빛비즈<svg data-v-c1d21be8="" data-v-f12001e6=""
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink">
<g data-v-c1d21be8="" fill="none" fill-rule="evenodd">
<path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638"
transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path>
</g>
</svg></a></li>
<li><a href="https://www.hanbit.co.kr/life/" target="_blank">한빛라이프<svg data-v-c1d21be8="" data-v-f12001e6=""
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink">
<g data-v-c1d21be8="" fill="none" fill-rule="evenodd">
<path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638"
transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path>
</g>
</svg></a></li>
<li><a href="https://www.hanbit.co.kr/edu/" target="_blank">한빛에듀<svg data-v-c1d21be8="" data-v-f12001e6=""
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink">
<g data-v-c1d21be8="" fill="none" fill-rule="evenodd">
<path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638"
transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path>
</g>
</svg></a></li>
<li><a href="https://www.hanbitn.com/" target="_blank">한빛앤<svg data-v-c1d21be8="" data-v-f12001e6=""
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink">
<g data-v-c1d21be8="" fill="none" fill-rule="evenodd">
<path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638"
transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path>
</g>
</svg></a></li>
<li><a href="/realtime" target="_blank">리얼타임<svg data-v-c1d21be8="" data-v-f12001e6=""
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink">
<g data-v-c1d21be8="" fill="none" fill-rule="evenodd">
<path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638"
transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path>
</g>
</svg></a></li>
<li><a href="https://www.hanbit.co.kr/textbook/" target="_blank">한빛정보교과서<svg data-v-c1d21be8=""
data-v-f12001e6="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink">
<g data-v-c1d21be8="" fill="none" fill-rule="evenodd">
<path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638"
transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path>
</g>
</svg></a></li>
<li><a href="https://www.hanbit.co.kr/rent/" target="_blank">한빛대관서비스<svg data-v-c1d21be8="" data-v-f12001e6=""
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink">
<g data-v-c1d21be8="" fill="none" fill-rule="evenodd">
<path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638"
transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path>
</g>
</svg></a></li>
<li><a href="https://devground.hanbit.co.kr//newletter/" target="_blank">데브레터<svg data-v-c1d21be8=""
data-v-f12001e6="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink">
<g data-v-c1d21be8="" fill="none" fill-rule="evenodd">
<path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638"
transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path>
</g>
</svg></a></li>
<li><a href="https://hongong.hanbit.co.kr/" target="_blank">혼공러들의 스터디공간<svg data-v-c1d21be8="" data-v-f12001e6=""
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="ico_outlink">
<g data-v-c1d21be8="" fill="none" fill-rule="evenodd">
<path data-v-c1d21be8="" d="M1.795 1.074L7.942 1.074 7.942 7.221M7.942 1.074L1.378 7.638"
transform="translate(-935 -867) translate(836 848) translate(14 14) translate(85 5)"></path>
</g>
</svg></a></li>
</ul>
</div>
<script>
$(document).ready(function () {
$("[data-family-menu]").click(function () {
$("[data-family-menu-ul]").toggle().toggleClass('family_menu_ul');
$("[data-family-icon]").toggleClass("rotate");
});
$('html').unbind("click").bind("click", function (e) {
if (!$(e.target).closest(".family_menu").hasClass('family_menu')) {
$("[data-family-menu-ul]").hide().removeClass(
'family_menu_ul'
);
$("[data-family-icon]").removeClass("rotate");
}
});
});
</script>
<!--//패밀리사이트-->
</div>
</div>
<!-- //한빛 정보 -->
</div>
<div class="copyright">©1993-2024 Hanbit Publishing Network, Inc. All rights reserved.</div>
</footer>
<!-- //푸터 -->
<div class="foot_download_btn"><a href="https://www.hanbit.co.kr/support/supplement_list.html">자료실</a></div>
<!-- 공통 JS 호출 -->
<script type="text/javascript" src="/js/common.js"></script>
<!-- //공통 JS 호출 -->
<!-- 퀵배너 -->
<section class="fly_menu_wrapper">
<h3 class="fly_menu_h2">최근 본 상품<span class="fly_menu_count">0</span></h3>
<div style="max-height:520px; overflow-y: scroll;">
<div></div>
</div>
</section>
<script>
jQuery(function ($) {
// 오늘 본 도서 top 속성값
var fly_menu_wrapper_top = $(".fly_menu_wrapper").css("top").replace('px', '');
// 상하 스크롤에 따른 최근 본 책 위치이동
$(window).scroll(function () {
var scrollValue = $(document).scrollTop();
$(".fly_menu_wrapper").css(
"top",
(scrollValue > fly_menu_wrapper_top) ? $("#wrap_gnb").height() + "px" : fly_menu_wrapper_top + "px"
)
});
});
</script>
<!-- //퀵배너 -->
</body>
</html>
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
다음에 나오는 DOM 노드 트리를 기억해 두자:
38.9 -77.03
