teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップJavaScriptに関する質問JavaScriptでHTMLの<form>要素を取得する際の方法について

編集履歴

回答編集履歴

3

コメントを受けての推敲と改訂

2019/11/01 22:35

投稿

AkitoshiManabe
AkitoshiManabe

スコア5434

test CHANGED
@@ -1,3 +1,15 @@
1
+ はじめに
2
+
3
+
4
+
5
+ コメントを受けて改訂した内容となります（回答の文中で斜体となる編集箇所です）。
6
+
7
+
8
+
9
+ ----
10
+
11
+
12
+
1
13
  ※ご意見でもいいとのことでしたので
2
14
 
3
15
 
@@ -6,13 +18,17 @@
6
18
 
7
19
 
8
20
 
9
- ドットで区切るプロパティPATHの記法（だっけか？）は、DOMの概念がなかった頃の名残です。最初はDOMなんて無かったですから。
21
+ ドットで区切るプロパティPATH（__造語:某Nodeモジュール内で関数の引数名に記述されていた ``propertyPath`` より__）の記法は、DOMの概念がなかった頃の名残です。
22
+
23
+ 最初はDOMなんて無かったですから。
10
24
 
11
25
 
12
26
 
13
27
  ## プロパティPATHの時代
14
28
 
15
- まだNetscapeNavigatorが息づいていた頃。JavaScriptは完全に趣味で「JavaScriptポケットリファレンスの改定2版（1999年5月）」で独習していました。その頃の記法です。当時はJavaScriptは危険だと言われていて、ウェブサイトもTABLE要素で無理やりデザインし、GIFアニメで表現する程度だったんです（あの Dream Wever でさえもTABLEデザイン用に特化されていました）。
29
+ まだNetscapeNavigatorが息づいていた頃。JavaScriptは完全に趣味で「JavaScriptポケットリファレンスの改定2版（1999年5月）」で独習していました。その頃の記法です。
30
+
31
+ 当時はJavaScriptは危険だと言われていて、ウェブサイトもTABLE要素で無理やりデザインし、GIFアニメで表現する程度だったんです（あの Dreamweaver でさえもTABLEデザイン用に特化されていました）。
16
32
 
17
33
 
18
34
 
@@ -32,9 +48,9 @@
32
48
 
33
49
 
34
50
 
35
- プロパティPATHの記法に話を戻すと、短所しかないです。
51
+ プロパティPATHの記法に話を戻すと、短所しかないです。__というか、使いどころが減りました。__
36
52
 
37
- HTML上でFORM要素のname属性が変わるとJavaScriptでも大量の書き換えが発生します。ブラケットで書く場合には変数を使えますがコードが長いことに変わりなかった。
53
+ HTML上でFORM要素__以下に含まれる入力フィールドの要素__ のname属性が変わるとJavaScriptでも大量の書き換えが発生します。ブラケットで書く場合には変数を使えますがコードが長いことに変わりなかった。
38
54
 
39
55
 
40
56
 
@@ -42,11 +58,15 @@
42
58
 
43
59
  なので「書き換え事案の発生のたびに typo を誘発する。」ことに。
44
60
 
45
- 幸いにもJavaScriptが主流になるのはDOMが整備されてからでしたが。
61
+ 幸いにもJavaScriptが主流になるのはDOMが整備されてからでした。
46
62
 
47
63
 
48
64
 
65
+ __DOMが整備された頃、 ビルトインオブジェクトを拡張して多機能化(今では禁忌の手法)する Ajaxライブラリ（[Prototype.js](http://prototypejs.org/)） や DOM操作に主眼をおいたAjaxライブラリ（[jQuery](https://jquery.com/)）が登場したのです。__
66
+
67
+
68
+
49
- こういう歴史を知っていると、普通のDOMを使っている今は「あるべき姿に改善されていった」だけでしかない。ポピュラーというのも違うんですよね。
69
+ こういう歴史を知っていると、普通にDOMを使っている今は「あるべき姿に改善されていった」だけでしかない。ポピュラーというのも違うんですよね。__モダンという言葉が似合っていると思います。__
50
70
 
51
71
 
52
72
 
@@ -66,7 +86,7 @@
66
86
 
67
87
 
68
88
 
69
- - プロパティPATHは必ずjavascript の編集がつきまとっていました
89
+ - プロパティPATHは必ず __フォームフィールド部分で__ javascript の編集がつきまとっていました
70
90
 
71
91
  - DOMはそうでもなくなった（AjaxでPOSTする事例をコードで示してみます）。
72
92
 
@@ -74,42 +94,96 @@
74
94
 
75
95
  ```javascript
76
96
 
77
- var postJson = {}
97
+ // コメントを受け、関数化したものに変更しています
78
98
 
79
- , form = document.querySelector("form#formId")
99
+ function getFormInputs( elem ) {
80
100
 
81
- , fields = form.querySelectorAll("input")
101
+ var postJson = {}
82
102
 
83
- , field, name, value
103
+ , form, fields, field, name, value
84
104
 
85
- ;
105
+ ;
86
-
87
- for(var i=0; i<fields.length; ++i ){
88
-
89
- field = fields[i];
90
-
91
- name = field.getAttribute("name") || field.id;
92
-
93
- value = field.value || '';
94
106
 
95
107
 
96
108
 
109
+ if( "string" === typeof elem ) {
110
+
111
+ // DOM のセレクタを与えた場合
112
+
113
+ form = document.querySelector( elem );
114
+
115
+ }
116
+
117
+ else if( elem instanceof HTMLFormElement ){
118
+
119
+ // getElementsById() で得られたHTMLFormElement や
120
+
121
+ // window.forms[`${formName}`] を与えた場合
122
+
123
+ form = elem;
124
+
125
+ }
126
+
127
+ // 例外処理は省略
128
+
129
+
130
+
131
+ fields = form.querySelectorAll("input")
132
+
133
+ for(var i=0; i<fields.length; ++i ){
134
+
135
+ field = fields[i];
136
+
137
+ name = field.getAttribute("name") || field.id;
138
+
139
+ value = field.value || '';
140
+
141
+
142
+
97
- postJson[name] = value;
143
+ postJson[name] = value;
144
+
145
+ }
146
+
147
+ return postJson;
98
148
 
99
149
  }
100
150
 
101
- // console.log( Json.stringify( postJson ) ); こんな風にtypo orz
102
-
103
- console.log( JSON.stringify( postJson ) ); // AjaxでPOSTするデータ
151
+ console.log( JSON.stringify( getFormInputs( {HTMLFormElement|selector} ) ) ); // AjaxでPOSTするデータ
104
152
 
105
153
  ```
106
154
 
107
- このように、HTMLの変化があっても使えるコードになります。
155
+ このように、HTMLの変化があっても~~使える~~ __使い回しの効く__ コードになります。
108
156
 
109
- 人的なコード改変が減る＝ヒューマンエラーも減ると言えますよね。
157
+ 人為的なコード改変が減る＝ヒューマンエラーも減ると言えますよね。
110
158
 
111
159
 
112
160
 
113
- ヒューマンエラーって、人の中にある些細な悩み事でも、集中を欠いて発生しちゃいます。
161
+ ヒューマンエラーは、人が集中を欠くと発生しちゃいます。些細な悩み事でもです。
114
162
 
115
- 発生率を下げるにはコード改変量を減らすなどの工夫も不可欠ですが、DOMならそれができます。
163
+ ヒューマンエラーの発生率を下げるにはコード自体の改変量を減らすなどの工夫が不可欠ですが、DOMならそれができます。
164
+
165
+
166
+
167
+
168
+
169
+ ## 最後に
170
+
171
+ 最初に回答した時点では、言葉足らずのために多くが曖昧な表現となっていました。
172
+
173
+ そのような稚拙な文章をお読みになられた方々にはこの場を借りて謝罪いたします。
174
+
175
+
176
+
177
+ 貴重なお時間を割いてしまい、申し訳ありません。
178
+
179
+
180
+
181
+ また、再度の推敲を促してくださった、質問者 (H40831 さん)、他のコメントを投げてくださった、think49さん、yamabejpさんには、併せて感謝申し上げます。
182
+
183
+
184
+
185
+ 編集事由につきましては、コメント欄でのやりとりをご覧くださいませ。
186
+
187
+
188
+
189
+ AkitoshiManabe

2

typoしていましたので修正しています。

2019/11/01 22:35

投稿

AkitoshiManabe
AkitoshiManabe

スコア5434

test CHANGED
@@ -98,10 +98,18 @@
98
98
 
99
99
  }
100
100
 
101
+ // console.log( Json.stringify( postJson ) ); こんな風にtypo orz
102
+
101
- console.log( Json.stringify( postJson ) ); // AjaxでPOSTするデータ
103
+ console.log( JSON.stringify( postJson ) ); // AjaxでPOSTするデータ
102
104
 
103
105
  ```
104
106
 
105
107
  このように、HTMLの変化があっても使えるコードになります。
106
108
 
107
109
  人的なコード改変が減る＝ヒューマンエラーも減ると言えますよね。
110
+
111
+
112
+
113
+ ヒューマンエラーって、人の中にある些細な悩み事でも、集中を欠いて発生しちゃいます。
114
+
115
+ 発生率を下げるにはコード改変量を減らすなどの工夫も不可欠ですが、DOMならそれができます。

1

コメントで求められた解説の追記

2019/10/31 21:33

投稿

AkitoshiManabe
AkitoshiManabe

スコア5434

test CHANGED
@@ -51,3 +51,57 @@
51
51
 
52
52
 
53
53
  ``querySelectorAll("input[type=text]")`` で複数のテキストフィールドを取得できる素晴らしさを、昔の自分に教えるとどうなるだろうと感じます。
54
+
55
+
56
+
57
+ ----
58
+
59
+ # コメントへの回答：(追記）
60
+
61
+
62
+
63
+ 「書き換え事案の発生のたびに typo を誘発するとは？」
64
+
65
+ 要はヒューマンエラーの削減に関することです。
66
+
67
+
68
+
69
+ - プロパティPATHは必ずjavascript の編集がつきまとっていました
70
+
71
+ - DOMはそうでもなくなった（AjaxでPOSTする事例をコードで示してみます）。
72
+
73
+
74
+
75
+ ```javascript
76
+
77
+ var postJson = {}
78
+
79
+ , form = document.querySelector("form#formId")
80
+
81
+ , fields = form.querySelectorAll("input")
82
+
83
+ , field, name, value
84
+
85
+ ;
86
+
87
+ for(var i=0; i<fields.length; ++i ){
88
+
89
+ field = fields[i];
90
+
91
+ name = field.getAttribute("name") || field.id;
92
+
93
+ value = field.value || '';
94
+
95
+
96
+
97
+ postJson[name] = value;
98
+
99
+ }
100
+
101
+ console.log( Json.stringify( postJson ) ); // AjaxでPOSTするデータ
102
+
103
+ ```
104
+
105
+ このように、HTMLの変化があっても使えるコードになります。
106
+
107
+ 人的なコード改変が減る＝ヒューマンエラーも減ると言えますよね。