More than 3 years have passed since last update.

document.formsが便利だった

Last updated at 2020-10-05Posted at 2020-10-05

はじめに

久しぶりにフレームワークを使わずにJavaScriptを扱いました。
その際、formの内容を操作をするのにdocument.formsを利用しました。
忘れない内にまとめておきます。

HTML文書内に含まれる全てのformのHTMLCollectionを返します。
読み取り専用です。

記述が短くてすみます。
document.formsなので、何を表しているのか直感でわかります。
document.formsのelementsプロパティはフォームコントロールのみにアクセスできます。
この為、他の要素の事を気にせずに（例：要素を判定）、フォームの操作のみ書くことができます。

読む側にとっては、何を検索しているのかをすぐに把握できる事がメリットだと思います。
また、書く側にとっても直感的に書けるのではないでしょうか。

下記でアクセスできます。

<!--対象のform-->
<form action="hoge" name="hoge" id="hoge1">

console.info(document.forms['myform'])
console.info(document.forms['hoge'])

// .でもアクセスできます。

document.formsが返すのはHTMLCollectionで、配列ではありません。
なので、forEachなどはこのままでは使えません。
特に、操作したいコントロールが大量にある場合は、Array.from()などで配列にするのが手っ取り早いと思います。

＊アクセスしたいものが1つ2つであれば、namedItem()の方が便利だと思います。

特定のformが取得できているかどうかは、返り値がundefinedかを判定すれば対応できます。

document.forms['myform'] === undefined

フォームのチェックボックスを一括でチェックしたり外したりするものです。