elementsとは
- ここで説明するelements とは次の語句からなるjavascriptのプロパティです。
- elements
- 読み: エレメンツ
意味: 「要素」の複数形
elementsプロパティの概要
このプロパティは、 form 要素のコンテンツに含まれる、全てのフォームコントロール要素を HTMLCollection として取得します。
この取得したコレクションは、生きたコレクションであり、任意の要素のプロパティを操作することができます。 各要素へのアクセスは、index番号、 name属性値、 id 属性値の何れかを使って行います。
構文
サンプルを見る前に構文を確認しておきます。
var nodeList = HTMLFormElement.elements;サンプルコードと実行結果
ここでは、form要素内に含まれる入力要素の各name属性の値を取得して表示しています。 formのelemensコレクションからインデックス番号で順番に各要素にアクセスしています。
またid値とname値で要素を特定する方法も取り上げています。
サンプルコード: HTML
<body>
<form action="" method="GET" name="namForm">
<p><input type="text" value="テキスト" name="namText" id="idText"></p>
<p><input type="number" value="55" name="namNumber" id="idNumber"></p>
<p><input type="submit" value="送信" name="namSubmit" disabled></p>
</form>
<p><output id="idOutput">innerHTML</output></p>
</body>
- 02-06: form (name="namForm"の要素です。)
- 03: input type="text" (name="namText"の要素です。)
- 04: input type="number" (name="namNumber"の要素です。)
- 05: input type="submit" (name="namSubmit"の要素です。ここでは機能を無効にしています。)
- 07: output (id="idOutput"の要素です。この要素に結果の出力をします。)
サンプルコード: script
<script>
let elmOutput = document.getElementById("idOutput");
let elmForm = document.forms.namedItem("namForm");
elmOutput.innerHTML = "";
for(index = 0; index < elmForm.length; index++){
elmOutput.insertAdjacentHTML("beforeend", elmForm.elements.item(index).name + "<br>");
}
elmOutput.insertAdjacentHTML("beforeend", elmForm.elements.namedItem("idNumber").name + "<br>");
elmOutput.insertAdjacentHTML("beforeend", elmForm.elements.namedItem("namSubmit").name + "<br>");
</script>
- 02: elmOutput (id="idOutput"の要素をElemntオブジェクトとして取得します。)
- 03: elmForm (name="namForm"の要素をHTMLFormElementオブジェクトとして取得します。)
- 04: .innerHTML = "" (elmOutputのコンテンツを空にしています。)
- 05-07: for (elmForm内にあるコントロールの数分だけ繰り返し処理を行います。)
- 06: elmForm.elements.item(index).name (elements.item(index)の部分でfor文の index を引数にアイテム全てのname属性値を取得しています。)
- 08: elmForm.elements.namedItem("idNumber").name (elements.namedItem("idNumber")の部分でid属性の値を使って要素を特定してname属性値を取得しています。)
- 09: elmForm.elements.namedItem("namSubmit").name (elements.namedItem("namSubmit")の部分でname属性の値を使って要素を特定してname属性値を取得しています。)
結果: id="idOutput"