form のプロパティが name 付き input を優先する
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ form.action で RadioNodeList が返ってくることがある
◆ name に form のプロパティと同じ名前はつけないほうがいい
◆ name に form のプロパティと同じ名前はつけないほうがいい
<form action="/a" method="post">
<input name="method">
<input name="method">
</form>
<input name="method">
<input name="method">
</form>
こんなフォームがあったとします
form の action や method を JavaScript で取得しようとすると 何が取れるでしょうか?
「/a」 と 「post」 になる っと思いますよね
実はなってくれません
form.action
// http://localhost/a
form.method
// RadioNodeList [ input input ]
// http://localhost/a
form.method
// RadioNodeList [ input input ]
取得しようとしたプロパティ名が name に指定されたフォームパーツがあればそれらのコレクションになります
基本同名を指定するのは radio ボタンくらいなので Chrome や Firefox では RadioNodeList という種類になります
IE だとそのタイプのオブジェクトがないので HTMLCollection です
form.method
// <HtmlCollection length="2">...</HtmlCollection>
// <HtmlCollection length="2">...</HtmlCollection>
わかりづらいしバグのもとなので やめて欲しい仕様ですが 変わらないと思うので name には form のプロパティと被るものはつけないほうがいいでしょう
ところで 代入ならプロパティが変わります
form.action = "/b"
// 属性かわる
form.action
// http://localhost/b
form.method = "get"
// 属性変わる
form.method
// RadioNodeList [ input input ]
// 属性かわる
form.action
// http://localhost/b
form.method = "get"
// 属性変わる
form.method
// RadioNodeList [ input input ]
代入後に再度取得しても name が同じのがあれば そっちが返ってきます