Open1

document.forms[0]って何？

TaiyoTaiyo

📄 document.forms の正体と使い方まとめ

1. document.forms とは？

  • HTMLCollection 型（配列“のように”扱えるオブジェクト）
  • ページ内のすべての 〇〇タグ 要素を集めたもの(今回はformで話を進める)

2. アクセス方法

インデックス番号でアクセス

<html>
    <body>
        <form> ~~~ </form>
        <form> ~~~ </form>
    </body>
</htnml>

document.forms[0] // 最初のフォーム
document.forms[1] // 2番目のフォーム

name属性でアクセス

<form name="loginForm"> のように name 属性があると、文字列指定も可能

<html>
    <body>
        <form name="loginForm">  ~~~ </form>
    </body>
</htnml>

document.forms["loginForm"]

3. 使用例

フォームをJavaScriptから送信

document.forms[0].submit();

ユーザーの操作を待たず、スクリプトから直接送信できる。
これを悪用する手口がCSRF攻撃など

4. 注意点⚠️

•	document.forms は HTMLCollection（配列っぽいが本物の配列ではない）
•	.length は使えるが、map() や forEach() はそのままでは使えない

→ 配列に変換すればOK：

Array.from(document.forms).forEach(form => {
  console.log(form.action);
});