HTML DOMのreadyStateプロパティとは？使い方をサンプルコード付きで解説
readyStateプロパティとは？
DOMのreadyStateプロパティは、現在のHTMLドキュメントの読み込み状態を文字列として返すプロパティです。ページの読み込みが完了しているかどうかをJavaScriptで判定したい場合に非常に便利です。
readyStateプロパティが返す値は、主に以下の3種類です。
- loading … ドキュメントの読み込み中であることを示します
- interactive … ドキュメントの解析が完了し、ユーザー操作が可能な状態（画像などのサブリソースはまだ読み込み中の場合があります）
- complete … ドキュメントおよびすべてのサブリソースの読み込みが完了した状態
構文
readyStateプロパティの構文はとてもシンプルです。以下のように記述します。
document.readyState
サンプルコード
それでは、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>
実行結果
上記のコードをブラウザで開くと、次のように表示されます。
「Check Status」ボタンをクリックすると、現在のHTMLドキュメントの読み込み状態が画面に表示されます。ドキュメントが完全に読み込まれた状態であれば、「complete」という結果が返されることが確認できます。
-
HTML DOM designModeプロパティの使い方を徹底解説
HTML DOMのdesignModeプロパティを使用すると、ドキュメント全体が編集可能かどうかを指定できます。このプロパティを活用することで、HTMLドキュメントはWYSIWYG（What You See Is What You Get：見たままが得られる）エディターのように動作し、ブラウザ上で直接HTMLドキュメントを編集できるようになります。designModeプロパティのデフォルト値は「off」に設定されており、これを「on」に変更することで、ドキュメントの編集が可能になります。構文designModeプロパティを設定する際の構文は以下の通りです。document.designMode
-
HTML DOM Video readyStateプロパティの使い方を解説！戻り値の一覧とサンプルコード
HTML DOM の Video readyState プロパティは、動画が現在どの程度再生可能な状態にあるかを示す数値を返します。この値を確認することで、メディアデータの読み込み状況を把握し、適切なタイミングで再生や操作を行うことができます。 構文 readyState プロパティの構文は以下のとおりです。 mediaObject.readyState 戻り値の一覧 このプロパティが返す数値とそれぞれの意味は次のとおりです。 0（HAVE_NOTHING）：利用可能な情報がまだ何もない状態 1（HAVE_METADATA）：メタデータの読み込みが完了し、動画のシーク（位置移動）が可能な状態