HTML

HTML DOMのvalueプロパティは、<select>要素内の<option>要素が持つ値（value属性）を取得・変更するためのプロパティです。この値は、フォーム送信時にサーバーへ送られるデータとして使用されます。 基本情報 <option>要素にvalue属性が指定されている場合、その属性値を操作します。value属性が指定されていない場合は、<option>要素内のテキスト内容が代わりに返される点に注意してください。 構文 値を取得する場合 object.value 値を変更する場合 object.value = テキスト サンプ

HTML DOMのprogress maxプロパティは、HTMLドキュメント内の<progress>要素が持つmax属性の値を「取得」および「変更」するために使用されるプロパティです。プログレスバーの最大値を動的に操作したい場合に非常に便利です。基本構文progress maxプロパティの使い方は以下の2通りあります。1. max値を取得する場合object.max2. max値を変更する場合object.max = number実装例それでは、progress maxプロパティを使った具体的なサンプルコードを見ていきましょう。この例では、ボタンをクリックするとプログレスバーのma

querySelector()メソッドとはHTML DOMのquerySelector()メソッドは、引数に指定したCSSセレクタに一致する要素のうち、ドキュメント内で最初に見つかった1つの要素を返します。該当する要素が存在しない場合はnullが返されます。ID、クラス名、タグ名など、あらゆる種類のCSSセレクタを使用できるため、JavaScriptによるDOM操作において最もよく使われるメソッドの一つです。なお、一致するすべての要素を取得したい場合は、querySelectorAll()メソッドを使用してください。構文querySelector()メソッドの基本構文は以下のとおりです。doc

querySelectorAll()メソッドは、HTML DOMにおいて、引数で指定したCSSセレクターに一致するすべての要素をHTML文書内から取得して返すメソッドです。単一の要素のみを返すquerySelector()メソッドとは異なり、条件に合致する全ての要素を一括で取得できるため、複数の要素に対して同時にスタイルを適用したり操作を行いたい場合に非常に便利です。 構文 querySelectorAll()メソッドの基本的な構文は以下の通りです。 document.querySelectorAll("CSSセレクター"); 戻り値について このメソッドは、指定されたCS

DOM の parentElement プロパティは、HTML ドキュメント内で指定した要素の親要素を Element オブジェクトとして返すプロパティです。JavaScript を使って DOM ツリーを辿りたいときに便利な基本プロパティの一つです。 parentElement の特徴 parentElement プロパティには以下のような特徴があります。 指定したノードの親が要素ノード（Element）である場合は、その親要素を返します。 親が要素ノードではない場合（たとえば親が Document ノードや DocumentType ノードの場合）は、null を返します。 類似の pa

HTML DOMのparentNodeプロパティは、HTMLドキュメント内の指定したノードの「親ノード」オブジェクトを取得するためのプロパティです。DOMツリーは階層構造になっており、ある要素からその上位（親）にあたる要素へアクセスしたい場合に、このプロパティが活用されます。基本構文parentNodeプロパティの基本的な書き方は以下のとおりです。node.parentNode対象となるノードに対してparentNodeを呼び出すだけで、その親ノードが返されます。親が存在しない場合（例：documentノード自身など）はnullが返される点にも注意しましょう。使用例ここでは、セレクトボックスで

HTML DOMのselectedIndexプロパティは、HTMLドキュメント内のドロップダウンリスト（select要素）において、現在選択されているオプションのインデックス番号を取得したり、変更したりすることができるプロパティです。構文selectedIndexプロパティの構文は以下のとおりです。selectedIndexの値を取得する場合object.selectedIndexselectedIndexの値を変更する場合object.selectedIndex = numberインデックスは0から始まることに注意してください。つまり、最初のオプションが「0」、2番目のオプションが「1」とな

HTML DOM Select add()メソッドとはHTML DOMのSelectオブジェクトが持つadd()メソッドは、HTMLドキュメント内のドロップダウンリスト（select要素）に、新しいoption要素を動的に追加するためのメソッドです。ユーザーの操作に応じて選択肢を後から追加したい場合などに活用できます。構文add()メソッドの基本構文は以下のとおりです。object.add(option, index)パラメータの説明option（必須）： リストに追加するOption要素を指定します。index（省略可）： 挿入位置を示すインデックス番号です。省略した場合、または無効な値を指

HTML DOM の select remove() メソッドは、HTML ドキュメント内のドロップダウンリスト（<select> 要素）から、指定したオプション（選択肢）を削除するためのメソッドです。ユーザーの操作に応じて動的にリストの内容を変更したい場合に非常に便利です。 構文 remove() メソッドの基本的な構文は以下のとおりです。 object.remove(index) index には、削除したいオプションのインデックス番号を指定します。インデックスは 0 から始まる点に注意してください。つまり、最初の選択肢を削除する場合は「0」、2番目の選択肢を削除する場合は「1

HTML DOM の Option オブジェクトは、HTML ドキュメント内の <option> 要素を表すオブジェクトです。<select> 要素で構成されるドロップダウンリストの各選択肢を、JavaScript から動的に操作・生成する際に使用されます。 Optionオブジェクトの作成方法 Option オブジェクトを作成するには、document.createElement() メソッドを使用します。 構文 document.createElement(OPTION); この構文を実行すると、新しい <option> 要素がメモリ上に生成され、その後ド

HTML DOM の option disabled プロパティは、<option> 要素が無効化（disabled）されているかどうかを取得し、その状態を変更するために使用されます。このプロパティを活用することで、ユーザーの操作に応じてドロップダウンリストの特定の選択肢を選択不可にするなど、動的なフォーム制御が実現できます。構文option disabled プロパティの構文は以下のとおりです。1. disabled の値を取得する場合object.disabled2. disabled の値を設定する場合object.disabled = true | falsetrue を設

HTML DOM の index プロパティは、<option> 要素がドロップダウンリスト内で持つインデックス位置（順番）を取得したり、変更したりすることができるプロパティです。選択肢がリストの中で何番目に位置しているのかを数値として把握したい場合に非常に便利です。 indexプロパティの基本構文 index プロパティの基本的な使い方は以下のとおりです。 インデックスを取得する場合 object.index インデックスを変更する場合 object.index = number 取得時は引数なしで呼び出すだけで、現在のインデックス位置（0から始まる数値）が返されます。変更時には

DOM Progressオブジェクトは、HTMLドキュメント内の<progress>要素を表すオブジェクトです。JavaScriptを使えば、進行状況を示すプログレスバーを動的に生成・操作できます。 ここでは、Progressオブジェクトの基本的な作成方法から、利用できるプロパティ、実際のサンプルコードまでをわかりやすく解説します。 Progressオブジェクトの作成方法 構文 Progressオブジェクトを作成するには、以下のようにdocument.createElement()メソッドを使用します。 document.createElement(PROGRESS); Progr

HTML DOMのQuoteオブジェクトは、HTML文書内の<q>要素を表すオブジェクトです。<q>要素は、短い引用文をマークアップするために使用され、多くのブラウザでは自動的に引用符が付けて表示されます。ここでは、JavaScriptを使ってq要素を動的に作成する方法を解説します。Quoteオブジェクトの作成方法Quoteオブジェクトを作成するには、document.createElement()メソッドを使用します。構文document.createElement(Q);QuoteオブジェクトのプロパティQuoteオブジェクトには、以下のプロパティが用意されています

HTML DOMのSampオブジェクトとはHTML DOMのSampオブジェクトは、HTMLドキュメント内の<samp>要素を表すオブジェクトです。<samp>要素は、プログラムやコンピュータシステムからのサンプル出力（実行結果など）を表示するために使用されるインライン要素です。ブラウザの多くでは、デフォルトで等幅フォントによって表示されます。DOM操作を通じてこのsampオブジェクトを動的に作成すれば、ページ上にプログラムの出力例を自由に追加できます。ここでは、その作成方法と具体的な使用例を見ていきましょう。構文sampオブジェクトを作成するには、以下のようにdocu

HTML DOM のセクションオブジェクトは、HTML ドキュメント内の <section> 要素を表します。<section> 要素は、ドキュメントを章や節などの意味のあるまとまりに分割するための HTML5 のセマンティック要素です。JavaScript を使えば、このセクション要素を動的に生成してページに追加することも可能です。 セクションオブジェクトの作成方法 セクションオブジェクトを作成するには、document.createElement() メソッドを使用します。 構文 基本的な構文は以下のとおりです。 document.createElement(SE

HTML DOM の Input Date オブジェクトが持つ form プロパティは、日付入力フィールド（<input type=date>）を囲んでいるフォームへの参照を返します。このプロパティを利用することで、JavaScript から日付入力要素が属するフォームの id や name などの情報に簡単にアクセスできるようになります。 なお、日付入力フィールドがどのフォームにも含まれていない場合は、null が返される点に注意してください。 構文 form プロパティの構文は以下のとおりです。 form オブジェクトへの参照を取得する場合 inputDateObject

HTML DOM の Input Date（日付入力フィールド）における name プロパティは、<input type=date> 要素に設定された name 属性の値を文字列として返します。さらに、新しい文字列を代入することで、name 属性の値を動的に変更することもできます。 構文 name プロパティの基本的な構文は以下のとおりです。 値を取得する場合 inputDateObject.name 値を設定する場合 inputDateObject.name = 文字列 取得の場合は現在設定されている name 属性の値が文字列で返され、設定の場合は指定した文字列が name 属

HTML DOM の Input Date max プロパティは、日付入力フィールド（<input type=date>）に設定された max 属性を取得・設定するためのプロパティです。max 属性を利用することで、ユーザーが選択できる日付の上限（最も遅い日付）を制御できます。 構文 max プロパティの基本的な構文は以下のとおりです。 値を取得する場合 inputDateObject.max 値を設定する場合 inputDateObject.max = YYYY-MM-DD 指定できる文字列値 設定値である「YYYY-MM-DD」の各部分は、以下のように対応しています。 文字

HTML DOM の Input Date min プロパティは、<input type=date> で作成された日付入力フィールドの min 属性を取得（参照）または設定するために使用されます。この属性を指定することで、ユーザーが選択できる日付の下限（最小日付）を制御できます。構文min プロパティの基本的な構文は以下のとおりです。値を取得する場合inputDateObject.min値を設定する場合inputDateObject.min = YYYY-MM-DD文字列値の形式設定できる値は 「YYYY-MM-DD」 形式の文字列で、各部分は次のように構成されます。文字列説明YY