LoginSignup
7
2

More than 3 years have passed since last update.

document.formsが便利だった

Last updated at Posted at 2020-10-05

はじめに

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

document.formsとは

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

便利な事

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

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

使い方

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

<!--対象の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の存在をチェックしたい場合

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

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

サンプル

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

See the Pen Form manipulation by H.N (@H_Naito) on CodePen.

参考

Document.forms
HTMLFormElement.elements
HTMLCollection
2.7.2.2 The HTMLFormControlsCollection interface

7
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
2