JavaScript 레거시 DOM 메서드로 문서 속성에 접근하는 방법

JavaScript에서 레거시 DOM(Legacy DOM) 메서드를 사용하면 문서의 다양한 속성에 간단하게 접근할 수 있습니다. 레거시 DOM은 W3C 표준 이전부터 브라우저에서 지원해 온 방식으로, document.title, document.URL, document.forms 같은 속성을 통해 문서 정보와 폼 요소에 접근합니다.

주요 문서 속성

document.title – 문서의 제목(<title> 태그 내용)을 반환합니다.
document.URL – 현재 문서의 전체 URL을 반환합니다.
document.forms – 문서 내 모든 폼 객체를 배열 형태로 반환합니다.
document.forms[n].elements[n] – 특정 폼 안의 개별 입력 요소에 인덱스로 접근합니다.

예제 코드

아래 예제는 버튼을 클릭하면 문서 제목, URL, 첫 번째 폼, 그리고 폼의 두 번째 요소를 차례대로 알림 창으로 보여줍니다.

<html>
<head>
   <title> Document Title </title>
   <script>
      function myFunc() {
         // 문서 제목 가져오기
         var ret = document.title;
         alert("문서 제목 : " + ret);

         // 문서 URL 가져오기
         var ret = document.URL;
         alert("문서 URL : " + ret);

         // 첫 번째 폼에 접근
         var ret = document.forms[0];
         alert("첫 번째 폼 : " + ret);

         // 첫 번째 폼의 두 번째 요소에 접근
         var ret = document.forms[0].elements[1];
         alert("두 번째 요소 : " + ret);
      }
   </script>
</head>
<body>
   <h1 id="title">This is main title</h1>
   <p>아래 버튼을 클릭하면 결과를 확인할 수 있습니다:</p>

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

   <form name="SecondForm">
      <input type = "button" value = "Don't ClickMe"/>
   </form>
</body>
</html>

코드 설명

myFunc() 함수가 호출되면 다음 순서로 동작합니다.

document.title로 <head> 안의 <title> 태그 값을 읽어옵니다.
document.URL로 현재 페이지의 주소를 가져옵니다.
document.forms[0]로 문서에서 첫 번째 <form> 요소(FirstForm)에 접근합니다.
document.forms[0].elements[1]로 해당 폼의 두 번째 입력 요소(Cancel 버튼)를 참조합니다.

이처럼 레거시 DOM은 별도의 선택자 API 없이도 문서 구조에 직관적으로 접근할 수 있다는 장점이 있습니다. 다만 최신 웹 개발에서는 getElementById(), querySelector() 같은 W3C DOM 메서드를 사용하는 것이 권장됩니다.