HTMLDOMオプションオブジェクト
HTML DOMオプションオブジェクトは、HTMLドキュメントの
オプションオブジェクトの作成方法を見てみましょう-
構文
以下は構文です-
document.createElement(“OPTION”);
プロパティ
オプションオブジェクト-
のプロパティは次のとおりです。| プロパティ | 説明 |
|---|---|
| 無効 | オプション要素が無効になっているかどうかを返し、変更します。 |
| defaultSelected | HTMLドキュメントのオプション要素のデフォルト値を返します。 |
| フォーム | HTMLドキュメントのオプション要素を含むフォームの参照を返します。 |
| インデックス | HTMLドキュメント内のオプションのインデックス位置を返して変更します。 |
| ラベル | HTMLドキュメントのオプションのlabel属性の値を返したり変更したりします。 |
| 選択済み | オプションの選択された属性の値を返し、変更します。 |
| テキスト | オプションのテキストを返し、変更します。 |
| 値 | サーバーを介して送信されるオプションの値を返し、変更します。 |
例
HTMLDOMオプションオブジェクトの例を見てみましょう-
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color:#fff;
color:#0197F6;
}
h1{
color:#23CE6B;
}
.btn{
background-color:#fff;
border:1.5px dashed #0197F6;
height:2rem;
border-radius:2px;
width:60%;
margin:2rem auto;
display:block;
color:#0197F6;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM option Object Demo</h1>
<select class="drop-down"></select>
<button onclick="createDropDownList()" class="btn">Create a drop-down option</button>
<script>
function createDropDownList() {
var option = document.createElement("option");
option.setAttribute("value","Hello");
option.innerText='Hello';
document.querySelector(".drop-down").appendChild(option);
}
</script>
</body>
</html> 出力
これにより、次の出力が生成されます-
「ドロップダウンオプションを作成」をクリックします 」ボタンをクリックしてオプションオブジェクトを作成し、ドロップダウンリストに追加します。
-
HTMLDOMHRオブジェクト
HTML DOM HRオブジェクトは、HTMLドキュメントの要素を表します。 hrオブジェクトを作成- 構文 以下は構文です- document.createElement(“HR”); hrオブジェクトの例を見てみましょう- 例 <!DOCTYPE html> <html> <style> body { text-align: center; background-color: #fff;
-
HTMLDOMUlオブジェクト
HTMLのHTMLDOMUlオブジェクトは、 を表します 要素。 を作成する 要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」 次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ 説明 コンパクト 順不同リストを通常より小さく表示するかどうかを設定/返します タイプ 順序付けされていないリストのtype属性の値を設定/返します 順不同リストの例を見てみましょう 要素- 例 <!DOCTYPE