HTML DOM의 close() 메서드는 현재 열려 있는 출력 스트림(output stream)을 닫는 역할을 합니다. 이 메서드를 호출하면 해당 창(window)에 대한 쓰기 작업이 완료되었음을 브라우저에 알려줍니다. close() 메서드는 어떠한 매개변수도 받지 않으며, 스트림을 닫기 전에 이전에 작성된 모든 데이터를 화면에 표시합니다.
문법(Syntax)
HTML DOM close() 메서드의 기본 문법은 다음과 같습니다.
document.close()
예제(Example)
close() 메서드의 실제 사용 예제를 살펴보겠습니다. 아래 예제에서는 버튼을 클릭하면 새로운 출력 스트림을 열고, 텍스트를 작성한 후 마지막으로 스트림을 닫습니다.
<!DOCTYPE html>
<html>
<body>
<p>아래 버튼을 클릭하면 출력 스트림이 열리고 텍스트가 입력된 후 스트림이 닫힙니다.</p>
<button onclick="streamClose()">스트림 닫기</button>
<script>
function streamClose() {
document.open();
document.write("<h1>샘플 제목</h1>");
document.write("<h2>샘플 제목 2</h2>");
document.write("<p>단락 요소입니다</p>");
document.close();
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과가 나타납니다.
'스트림 닫기' 버튼을 클릭하면 다음과 같이 화면이 변경됩니다.
코드 설명
위 예제에서는 클릭 시 streamClose() 함수를 실행하는 '스트림 닫기' 버튼을 생성했습니다.
<button onclick="streamClose()">스트림 닫기</button>
streamClose() 함수 내부에서는 먼저 document.open() 메서드를 호출하여 새로운 출력 스트림을 엽니다. 이때 기존에 문서에 작성되어 있던 내용은 모두 지워집니다. 그다음 document.write()를 사용하여 <h1>, <h2>, 그리고 <p> 요소를 문서에 작성합니다. 마지막으로 document.close() 메서드를 호출하여 출력 스트림을 닫고 쓰기 작업을 종료합니다.
function streamClose() {
document.open();
document.write("<h1>샘플 제목</h1>");
document.write("<h2>샘플 제목 2</h2>");
document.write("<p>단락 요소입니다</p>");
document.close();
}정리
close() 메서드는 일반적으로 document.open()과 document.write()와 함께 사용됩니다. open()으로 스트림을 열고, write()로 내용을 작성한 후, close()로 스트림을 닫아야 브라우저가 문서 로딩을 정상적으로 완료했다고 인식할 수 있습니다. 스트림을 명시적으로 닫지 않으면 일부 브라우저에서 페이지 로딩이 계속 진행 중인 것으로 표시될 수 있으므로 주의가 필요합니다.