W3C DOM 메서드로 문서 속성에 접근하는 방법

IE4 문서 객체 모델(DOM)은 마이크로소프트 인터넷 익스플로러 4(Internet Explorer 4) 버전에서 처음 소개되었습니다. 이후 발표된 IE 5 이상 버전부터는 대부분의 기본적인 W3C DOM 기능을 지원하기 시작했습니다.

W3C DOM이란?

W3C DOM(World Wide Web Consortium Document Object Model)은 HTML 및 XML 문서를 프로그래밍적으로 다룰 수 있도록 정의한 표준 API입니다. 이 표준을 따르면 브라우저 종류와 관계없이 일관된 방식으로 문서의 요소에 접근하고, 내용을 수정하거나 속성을 조작할 수 있습니다.

대표적인 W3C DOM 메서드는 다음과 같습니다.

document.getElementById() : 지정한 ID를 가진 요소를 하나 반환합니다.
document.getElementsByTagName() : 지정한 태그 이름을 가진 모든 요소를 배열 형태(NodeList)로 반환합니다.
element.innerHTML : 해당 요소의 내부 HTML 콘텐츠를 읽거나 수정합니다.

예제 코드

W3C DOM 메서드를 사용하여 문서 속성에 접근하려면 아래 예제 코드를 실행해 보세요.

<html>
   <head>
      <title>Document Title</title>
      <script type="text/javascript">
         function myFunc() {
            // 태그 이름으로 <title> 요소에 접근
            var ret = document.getElementsByTagName("title");
            alert("문서 제목 : " + ret[0].text);

            // ID를 사용해 특정 요소에 접근
            var ret = document.getElementById("heading");
            alert(ret.innerHTML);
         }
      </script>
   </head>
   <body>
      <h1 id="heading">This is main title</h1>
      <p>아래 버튼을 클릭하면 결과를 확인할 수 있습니다:</p>

      <form id="form1" name="FirstForm">
         <input type="button" value="Click Me" onclick="myFunc();" />
         <input type="button" value="Cancel">
      </form>

      <form id="form2" name="SecondForm">
         <input type="button" value="Don't Click Me" />
      </form>
   </body>
</html>

코드 설명

위 예제의 핵심 동작은 다음과 같습니다.

document.getElementsByTagName("title") : 문서 내 모든 <title> 태그를 가져온 뒤, 첫 번째 요소의 텍스트(문서 제목)를 알림 창으로 출력합니다.
document.getElementById("heading") : id 속성값이 "heading"인 <h1> 요소를 찾아, innerHTML을 통해 내부 콘텐츠를 출력합니다.

[Click Me] 버튼을 클릭하면 두 개의 알림 창이 차례로 나타나며, 각각 문서 제목과 제목 요소의 내용을 확인할 수 있습니다.

정리

W3C DOM 표준 메서드를 활용하면 브라우저 호환성을 유지하면서도 문서의 구조, 내용, 스타일에 자유롭게 접근할 수 있습니다. 특히 getElementById()와 getElementsByTagName()은 가장 널리 사용되는 기본 메서드이므로 반드시 숙지하는 것이 좋습니다.