이는 이전 버전의 JavaScript 언어에 도입된 모델입니다. 모두 모든 브라우저에서 지원되지만 양식, 양식 요소 및 이미지와 같은 파일의 특정 주요 부분에만 액세스할 수 있습니다.
이 모델은 문서 전체에 대한 정보를 제공하는 제목, URL, 마지막 변경 사항 등 여러 가지 읽기 전용 속성을 제공합니다. 또한 이 모델에서는 문서의 속성 값을 설정하고 가져오는 데 사용할 수 있는 다양한 메서드가 제공됩니다.
기존 DOM의 문서 속성:
다음은 기존 DOM을 사용하여 액세스할 수 있는 문서 속성 목록입니다.
기존 DOM의 문서화 방법:
다음은 기존 DOM에서 지원하는 메서드 목록입니다.
예:
HTML DOM을 사용하면 모든 HTML 요소, HTML 문서를 찾을 수 있습니다. 예를 들어 웹 문서에 양식 요소가 포함된 경우 JavaScript를 사용하면 이를 document.forms[0]이라고 부를 수 있습니다. 웹 문서에 두 개의 양식 요소가 포함된 경우 첫 번째 양식은 document.forms[0]이고 두 번째 양식은 document.forms[1]입니다.
위에 제공된 계층 구조와 속성을 사용하여 document.forms[0].elements[0] 등을 사용할 수 있습니다.
다음은 기존 DOM 방법을 사용하여 문서 속성에 액세스하는 예입니다.
<html> <head> <title> Document Title </title> <script type="text/javascript"> <!-- function myFunc() { var ret = document.title; alert("Document Title : " + ret ); var ret = document.URL; alert("Document URL : " + ret ); var ret = document.forms[0]; alert("Document First Form : " + ret ); var ret = document.forms[0].elements[1]; alert("Second element : " + ret ); } //--> </script> </head> <body> <h1 id="title">This is main title</h1> <p>Click the following to see the result:</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>
참고: 이 예제는 양식 및 콘텐츠와 같은 개체를 반환하며 해당 값에 액세스하려면 이 자습서에서 논의되지 않은 이러한 개체의 속성을 사용해야 합니다.