HTML DOM Option defaultSelectedプロパティとは？使い方をサンプルコード付きで解説
HTML DOMのdefaultSelectedプロパティは、HTMLドキュメント内のoption要素に設定されたデフォルトの選択状態を取得するためのプロパティです。このプロパティは、ページが読み込まれた時点で該当するoption要素にselected属性が指定されていたかどうかを、真偽値（true / false）として返します。
なお、defaultSelectedプロパティはユーザーがその後プルダウンリストで選択を変更しても値が変化しないため、「初期状態でどの項目が選択されていたか」を判定したい場合に特に便利です。
構文
defaultSelectedプロパティの基本的な構文は以下のとおりです。
object.defaultSelected
サンプルコード
ここでは、実際にdefaultSelectedプロパティを使用した例を見てみましょう。以下のコードでは、科目を選択するプルダウンリストを表示し、ボタンをクリックすると現在選択されている項目のdefaultSelectedの値を画面に出力します。
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.2rem;
}
.drop-down{
width:35%;
border:2px solid #fff;
font-weight:bold;
padding:8px;
}
.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;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Option defaultSelected デモ</h1>
<p>好きな科目を選択してください：</p>
<select class='drop-down'>
<option>物理</option>
<option selected>数学</option>
<option>化学</option>
<option>英語</option>
</select>
<button onclick="showValue()" class="btn">defaultSelectedの値を表示</button>
<div class="show"></div>
<script>
function showValue() {
var dropDown = document.querySelector(".drop-down");
var msg = document.querySelector(".show").innerHTML="defaultSelectedの値は " +
dropDown[dropDown.selectedIndex].defaultSelected;
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、以下のような出力が得られます。
この例では、HTML上で「数学」のoption要素にselected属性が指定されているため、初期状態では「数学」が選択された状態で表示されます。
次に、青色のボタンをクリックして、プルダウンリスト内の各項目におけるdefaultSelected属性の値を確認してみましょう。
初期選択されている「数学」を選んだままボタンをクリックすると、defaultSelectedの値はtrueと表示されます。
一方、ユーザーが別の項目（例：「化学」）を選択し直してからボタンをクリックすると、defaultSelectedの値はfalseと表示されます。これは、その項目がHTML上で初期選択として指定されていないことを意味します。
まとめ
defaultSelectedプロパティを使うことで、JavaScriptから簡単にoption要素の初期選択状態を判定できます。フォームのリセット処理や、初期値に戻す操作などを行う際に活用できるので、ぜひ覚えておきましょう。
-
HTML DOMのisContentEditableプロパティとは？構文・戻り値・実装例を解説
HTML DOMのisContentEditableプロパティは、要素のコンテンツが編集可能かどうかを判定し、その結果を真偽値（boolean）として返します。このプロパティは、HTMLのcontenteditable属性の状態を反映しており、動的に要素の編集可否を確認したい場合に役立ちます。構文構文は以下のとおりです。真偽値（true / false）を返します。HTMLElementObject.isContentEditable戻り値（真偽値）このプロパティは、以下のbooleanValueを返します。booleanValue説明trueHTMLElementObjectのコンテンツが編
-
HTML DOMのlastModifiedプロパティとは？使い方とサンプルコードを解説
HTML DOMのlastModifiedプロパティは、現在のドキュメントが最後に更新された日時を文字列として返します。このプロパティは読み取り専用で、JavaScriptを使えばページの最終更新日を簡単に取得して表示できます。 返される日時の形式は一般的に「MM/DD/YYYY hh:mm:ss」です。静的なHTMLファイルではファイル自体の最終更新日時が返されますが、動的に生成されるページではサーバー側の設定によって返される値が変わる点に注意してください。 構文 lastModifiedプロパティの構文は以下の通りです。 最終更新の日時を取得する場合 − document.lastMod