DOM readyState 속성은 현재 HTML 문서의 로딩(불러오기) 상태를 문자열로 반환합니다. 이 속성을 활용하면 자바스크립트만으로 문서가 완전히 로드되었는지 여부를 간편하게 확인할 수 있습니다.
문법(Syntax)
readyState 속성의 기본적인 사용 방법은 다음과 같습니다.
document.readyState
이 속성은 읽기 전용(read-only)이며, 다음 세 가지 값 중 하나를 반환합니다.
- loading – 문서가 아직 로딩 중인 상태입니다.
- interactive – 문서의 파싱은 끝났지만 이미지 등 하위 리소스 로딩이 진행 중인 상태입니다.
- complete – 문서와 모든 하위 리소스의 로딩이 완료된 상태입니다.
예제(Example)
다음은 readyState 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 현재 문서의 로딩 상태가 화면에 표시됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: #ff7f5094;
height:100%;
}
p{
font-weight:700;
font-size:1.2rem;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
.show{
font-size:1.5rem;
}
</style>
</head>
<body>
<h1>DOM readyState Property Demo</h1>
<p>Is current document ready?</p>
<button onclick="showStatus()" class="btn">Check Status</button>
<div class="show"></div>
<script>
function showStatus() {
document.querySelector(".show").innerHTML="Yes, your current document's loading is " + "" + document.readyState +".";
}
</script>
</body>
</html>
출력 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
"Check Status" 버튼을 클릭하면 현재 HTML 문서의 로딩 상태를 즉시 확인할 수 있습니다.
마무리 정리
readyState 속성은 별도의 매개변수 없이 document 객체에서 바로 호출할 수 있으며, 주로 동적 콘텐츠를 로딩하거나 DOM 조작 시점을 제어해야 할 때 유용하게 활용됩니다. 문서 로딩 완료 여부에 따라 스크립트 실행 순서를 관리하고 싶다면, load 이벤트나 DOMContentLoaded 이벤트와 함께 사용하는 것도 좋은 방법입니다.