js

JS - document 객체

3월 19, 2019

document 객체는 window 객체의 하위 객체로 웹 문서에 관련하여 많은 내용을 처리할 수 있습니다. document 에 접근할 수 있는 형식은 다음과 같습니다.

document.속성

속 성	설 명
linkColor	링크의 색상
alinkColor	링크를 누를 때의 색을 설정
vlinkColor	방문한 링크의 색을 설정
bgColor	문서의 배경색을 설정
fgColor	문서의 글자색을 설정
Title	현재 문서의 제목을 설정
domain	현재 서버이름을 반환
URL	현재 문서의 URL를 반환
location	현재 문서의 URL 주소를 반환 location = "URL"; 형식의 다른 페이지 이동도 가능합니다.
referrer	현재 문서를 호출한 이전 페이지의 URL
lastModified	웹 문서의 최종 수정일

document 에서 사용할 수 있는 주요 메서드는 다음 표와 같습니다.

메서드	설 명
clear()	문서의 내용을 지움
close()	문서를 종료
open()	문서에 내용 기록을 준비
write()	문서에 문자열을 출력
writeln()	문서에 문자열을 출력하고, 자동 줄바꿈함
eval(x)	문자열을 객체로 변경
toString()	객체를 문자열로 변경
valueOf	객체의 값을 표시
getSelection()	마우스로 드래그한 문자열을 반환

그 외 기타 메서드를 확인하려면 for 문을 이용하면 확인할 수 있습니다.

<script>
for(var prob in document){
  document.write( prob + "<br/>");
}
</script>

이제 문서에 스타일을 적용해 보겠습니다.

<html>
 <head>
  <title>하보니</title>
 </head>
 <body>
  <script>
   // 문서의 배경색을 노란색으로 ...
   document.bgColor = "yellow";

   // 문서의 문자를 출력.
   document.write("하보니");
   // 하보니

   // 문서의 모든 글자색을 빨간색으로 ...
   document.fgColor = "red";

   // 문서의 제목 "하보니"를 "Hello Word!" 로 바꿉니다. 
   document.title = "Hello Word!";


   // 현재 서버 이름
   document.write( document.domain );
   // 결과: localhost  

   // 현재 문서의 URL
   document.write( document.location );
   // 결과: http://localhost:8080/referer.php

   // 현재 서버 URL 를 출력
   document.write( document.URL );
   // http://localhost:8080/

   // 문서의 최종 수정일을 얻습니다.
   document.write( document.lastModified );
   // 03/16/2019 23:06:16

  </script>
 </body>
</html>

<script>
var str = "하보니 php";

// 형식은 이와 같지만..
// open() 과 close() 를 생략해도 무방합니다.
document.open();
document.write( str );
document.close();
</script>

0 댓글