あまり知られていないJavaScript Option()コンストラクタを使用すると、DOM要素を作成する冗長な構文を避けることができます
私たちは皆jQueryを愛しています。 このライブラリの多くの素晴らしい資質の中には、DOM要素を簡単に作成し、ネイティブJavaScriptの通常の冗長な構文なしで文書に配置する機能があります。
しかし、かなり最小限の労力でオプション要素を作成できるJavaScriptのあまり知られていない機能があります。 この機能はOption()コンストラクタです。 構文は単純です:
- フォーム要素への参照を取得する
- コンストラクタをインスタンス化し、返されたオブジェクトをフォーム要素
- インスタンス化中に、次の引数を渡し: 1)ページに表示されるテキスト、2)コントロールの値、3)デフォルトの選択であり、選択されている場合
例#1
例#1では、selectコントロールを含む単純なフォームがあります。 マークアップには、”月曜日”、”火曜日”、”水曜日”の3つのオプションがあります。 JavaScriptが実行されると、次のアクションが実行されます:
- 私たちは、選択コントロールへの参照を取得します(“w”)
- 我々は、オプション要素のすべてを削除します(w.length=0)
- 二つのプロパティを持つオブジェクトの配列を作成します(“d”)
- 配列をループし、各配列要素について、オブジェクトの”text”と”val”プロパティを使用して、新しいselect要素を動的に作成します。 いずれの場合も、最後の2つの引数：”false”、”false”は、この新しい要素がデフォルトではなく、選択されないことを意味します。
そしてそれはそれです！
概要
あまり知られていないOption()コンストラクタを使用して、新しいHTMLオプション要素を作成できます。 したがって、これにどのようにアプローチするかに応じて、ドキュメントの通常の冗長な構文をサイドステップする非常に効率的なコードを書くことがcreateTextNode(),ドキュメント。createElement()、およびdocument。appendChild()メソッド。
JavaScript Option()コンストラクタの便利なリンク