IE4 DOM이란?
IE4 문서 객체 모델(Document Object Model, DOM)은 마이크로소프트 인터넷 익스플로러 버전 4에서 처음 도입된 모델입니다. IE4 DOM은 document.all 컬렉션을 통해 웹 페이지 내의 모든 요소에 접근할 수 있으며, 요소의 id나 태그 이름을 기준으로 원하는 노드를 쉽게 찾을 수 있습니다.
인터넷 익스플로러 5 이상 버전부터는 대부분의 기본적인 W3C DOM 기능도 함께 지원합니다. 따라서 최신 브라우저 환경에서는 W3C 표준 메서드(getElementById, getElementsByTagName 등)를 사용하는 것이 좋지만, 레거시 코드를 이해하거나 유지보수할 때는 IE4 DOM 방식을 알아두면 유용합니다.
주요 메서드 및 속성
- document.all["id"] — 지정한 id를 가진 요소에 직접 접근합니다.
- document.all.tags("태그명") — 특정 태그 이름을 가진 모든 요소의 컬렉션을 반환합니다.
- innerHTML — 요소 내부의 HTML 콘텐츠를 읽거나 수정할 수 있습니다.
예제
IE4 DOM 메서드를 사용하여 문서 속성에 접근하려면 아래 코드를 실행해 보세요.
<html>
<head>
<title> Document Title </title>
<script>
<!--
function myFunc()
{
var ret = document.all["heading"];
alert("Document Heading : " + ret.innerHTML );
var ret = document.all.tags("P");
alert("First Paragraph : " + ret[0].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>코드 설명
위 예제에서는 버튼을 클릭하면 myFunc() 함수가 실행됩니다. 먼저 document.all["heading"]을 사용해 id가 "heading"인 <h1> 요소를 가져오고, 해당 요소의 innerHTML 값을 경고창(alert)으로 표시하여 문서의 제목을 확인합니다.
이어서 document.all.tags("P")를 호출하면 문서 내 모든 <p> 태그가 컬렉션 형태로 반환됩니다. 이 컬렉션의 첫 번째 항목 ret[0]에 접근하면 첫 번째 단락의 내용을 얻을 수 있습니다.
이처럼 IE4 DOM을 활용하면 별도의 복잡한 설정 없이도 문서 내 요소에 빠르게 접근하고 속성값을 읽어올 수 있습니다.