HTML DOM open() 메서드란?
HTML 문서에서 document.open() 메서드는 현재 문서의 기존 내용을 모두 지우고 새로운 출력 스트림을 엽니다. 이렇게 열린 스트림에는 document.write() 또는 document.writeln() 메서드를 사용하여 새로운 콘텐츠를 작성할 수 있으며, 작성이 끝난 후에는 document.close() 메서드로 스트림을 닫아야 브라우저에 정상적으로 표시됩니다.
구문
open() 메서드의 기본 구문은 다음과 같습니다.
document.open(type, replace);
각 매개변수의 의미는 다음과 같습니다.
- type : 새로 열릴 문서의 MIME 타입을 나타냅니다. 기본값은 text/html이며, 생략 가능합니다.
- replace : 새 문서의 히스토리 항목이 이 문서를 연 문서의 히스토리 항목을 상속받을지 여부를 결정합니다. 생략 가능합니다.
예제
버튼을 클릭하면 open() 메서드로 새 문서를 열고 write() 메서드로 내용을 작성한 뒤 close() 메서드로 마무리하는 전체 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
color:#fff;
background: #ff7f5094;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM open() Method Demo</h1>
<button onclick="openMethod()" class="btn">Click me to try Open() Method</button>
<script>
function openMethod() {
document.open();
document.write(`
<style>
body{
text-align:center;
color:#fff;
background: #ff7f5094;
}
</style>
<h1>DOM open() Method Demo</h1>
<p>New document</p>
`);
document.close();
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
화면 중앙의 파란색 버튼을 클릭하면 open() 메서드가 호출되어 기존 문서가 지워지고 새로운 출력 스트림이 열립니다. 그 결과 아래와 같이 "New document"라는 새 문서 화면이 표시됩니다.
참고 사항
document.open()은 현재 로드된 문서를 완전히 대체하므로, 호출 시점에 페이지의 모든 요소와 스크립트가 제거된다는 점에 유의해야 합니다. 또한 최신 웹 개발 환경에서는 보안 및 유지보수 측면에서 이 방식보다 DOM 조작 API(createElement, appendChild 등)를 활용하는 것이 권장됩니다.