HTMLDOM選択オブジェクト
HTML DOM selectオブジェクトは、HTMLドキュメントの
選択したオブジェクトを作成する方法を見てみましょう
構文
以下は構文です-
document.createElement(“SELECT”);
プロパティ
以下は、selectObject-
のプロパティです。| プロパティ | 説明 |
|---|---|
| オートフォーカス | ページの読み込み時にドロップダウンリストをフォーカスするかどうかを返し、変更します。 |
| 無効 | ドロップダウンリストが無効になっているかどうかを返し、変更します。 |
| 長さ | HTMLドキュメントのドロップダウンリスト内の |
| フォーム | HTMLドキュメントのドロップダウンリストを含むフォームの参照を返します。 |
| 複数 | ドロップダウンリストから複数のオプションを選択できるかどうかを返し、変更します。 |
| 名前 | ドロップダウンリストのname属性の値を返し、変更します。 |
| サイズ | ドロップダウンリストのサイズ属性の値を返し、変更します。 |
| タイプ | ドロップダウンリストのtype属性の値を返します。 |
| 値 | ドロップダウンリストのvalue属性の内容を返し、変更します。 |
| selectedIndex | HTMLドキュメントのドロップダウンリストで選択したオプションのインデックスを返し、変更します。 |
メソッド
以下は方法です-
| メソッド | 説明 |
|---|---|
| add（） | HTMLドキュメントのドロップダウンリストに新しいオプションを追加します。 |
| remove（） | HTMLドキュメントのドロップダウンリストから新しいオプションを削除します。 |
| checkValidity（） | HTMLドキュメントのドロップダウンリストの有効性をチェックします。 |
例
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 select Object Demo</h1>
<button onclick="createDropDownList()" class="btn">Create a drop-down list</button>
<script>
function createDropDownList() {
var dropDown = document.createElement("SELECT");
dropDown.innerHTML="<option>CAKE</option><option>PIZZA<option><option>BURGER</option>";
document.body.appendChild(dropDown);
}
</script>
</body>
</html> これにより、次の出力が生成されます-
[ドロップダウンリストを作成する]をクリックします ドロップダウンリストを作成するには、[ドロップダウンリストを作成する]ボタンをクリックします。
-
HTMLDOMOlオブジェクト
HTMLのHTMLDOMOlオブジェクトは、要素を表します。 要素の作成 var olObject = document.createElement(“OL”) ここで、「olObject」は次のプロパティを持つことができます- プロパティ 説明 反転 リストの順序を降順にするか昇順にするかを設定/返します（デフォルト） 開始 順序付きリストの開始属性の値を設定/返します タイプ 順序付きリストのtype属性の値を設定/返します オールスタートの例を見てみましょう プロパティ- 例 <!DOCTYPE
-
HTMLDOMUlオブジェクト
HTMLのHTMLDOMUlオブジェクトは、 を表します 要素。 を作成する 要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」 次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ 説明 コンパクト 順不同リストを通常より小さく表示するかどうかを設定/返します タイプ 順序付けされていないリストのtype属性の値を設定/返します 順不同リストの例を見てみましょう 要素- 例 <!DOCTYPE