JavaScript에서 웹 문서의 콘텐츠에 접근하고 수정하기 위해 사용할 수 있는 DOM(Document Object Model)에는 여러 가지 유형이 있습니다. 각 모델은 도입된 시기와 지원 범위가 다르며, 아래에서 주요 세 가지 DOM 유형을 살펴보겠습니다.
JavaScript에서 사용되는 DOM의 세 가지 유형
1. 레거시 DOM (Legacy DOM)
레거시 DOM은 JavaScript 언어 초창기 버전에서 도입된 모델입니다. 모든 브라우저에서 폭넓게 지원된다는 장점이 있지만, 문서 전체가 아닌 폼(form), 폼 요소, 이미지와 같은 특정 핵심 영역에만 접근할 수 있다는 한계가 있습니다.
2. W3C DOM
W3C DOM은 World Wide Web Consortium(W3C)이 표준화한 문서 객체 모델입니다. 이 모델은 문서의 모든 콘텐츠에 대한 접근과 수정이 가능하며, 현재 사용되는 거의 모든 최신 브라우저에서 지원됩니다. 따라서 현대적인 웹 개발에서 가장 널리 사용되는 표준 방식입니다.
3. IE4 DOM
IE4 DOM은 Microsoft의 Internet Explorer 4 버전에서 처음 도입된 문서 객체 모델입니다. 이후 출시된 IE 5 이상 버전부터는 W3C DOM의 대부분의 기본 기능을 지원하게 되었습니다.
예제 코드
다음 예제를 통해 W3C DOM 방식으로 문서 속성에 접근하는 방법을 확인해 보겠습니다.
<html>
<head>
<title> Document Title </title>
<script type="text/javascript">
<!--
function myFunc()
{
var ret = document.getElementsByTagName("title");
alert("Document Title : " + ret[0].text );
var ret = document.getElementById("heading");
alert(ret.innerHTML );
}
//-->
</script>
</head>
<body>
<h1 id = "heading">This is main title</h1>
<p>Click the following to see the result:</p>
<form id = "form1" name = "FirstForm">
<input type = "button" value = "Click Me" onclick = "myFunc();" />
<input type = "button" value = "Cancel">
</form>
<form d = "form2" name = "SecondForm">
<input type = "button" value = "Don't ClickMe"/>
</form>
</body>
</html>
위 코드에서는 document.getElementsByTagName() 메서드를 사용해 문서의 제목(title) 태그에 접근하고, document.getElementById() 메서드로 특정 ID를 가진 요소의 내용을 가져와 알림 창으로 출력합니다. 버튼을 클릭하면 myFunc() 함수가 실행되면서 결과를 확인할 수 있습니다.