전통적인 문서 객체 모델에 대한 JavaScript 지원에 대한 간략한 소개

전통적인 문서 객체 모델에 대한 JavaScript 지원에 대한 간략한 소개_기본 지식

WBOY

풀어 주다： 2016-05-16 15:54:39

원래의

994명이 탐색했습니다.

이는 이전 버전의 JavaScript 언어에 도입된 모델입니다. 모두 모든 브라우저에서 지원되지만 양식, 양식 요소 및 이미지와 같은 파일의 특정 주요 부분에만 액세스할 수 있습니다.

이 모델은 문서 전체에 대한 정보를 제공하는 제목, URL, 마지막 변경 사항 등 여러 가지 읽기 전용 속성을 제공합니다. 또한 이 모델에서는 문서의 속성 값을 설정하고 가져오는 데 사용할 수 있는 다양한 메서드가 제공됩니다.
기존 DOM의 문서 속성:

다음은 기존 DOM을 사용하여 액세스할 수 있는 문서 속성 목록입니다.

2015616103205974.jpg (662×762)

2015616103233946.jpg (655×726)

기존 DOM의 문서화 방법:

다음은 기존 DOM에서 지원하는 메서드 목록입니다.

2015616103255189.jpg (681×498)

예:

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>

로그인 후 복사

참고: 이 예제는 양식 및 콘텐츠와 같은 개체를 반환하며 해당 값에 액세스하려면 이 자습서에서 논의되지 않은 이러한 개체의 속성을 사용해야 합니다.