teratail
回答率
85.47%
質問するログイン新規登録
トップHTML5に関する質問required属性の、attributeでの操作とpropertyでの操作の違いについて

編集履歴

回答編集履歴

2

jsfiddleのサンプル追加

2017/08/02 11:49

投稿

think49
think49

スコア18166

test CHANGED
@@ -53,6 +53,10 @@
53
53
  required 属性は「反映型IDL属性 (Reflecting content attributes)」の為、`required` プロパティと同様の結果を得ることが出来ます。
54
54
 
55
55
  ただし、他所からIDL属性が変更された場合は属性値に空文字(falsy)がセットされる為、注意が必要です。
56
+
57
+
58
+
59
+ - [requiredプロパティとrequired属性 - JSFiddle](https://jsfiddle.net/Lt3emgc1/1/)
56
60
 
57
61
 
58
62
 

1

仕様を勘違いしていた為、本文を大幅に変更しました

2017/08/02 11:49

投稿

think49
think49

スコア18166

test CHANGED
@@ -1,14 +1,58 @@
1
- ### requiredプロパティとrequired属性
1
+ **(2017/08/02 20:47追記) 仕様を勘違いしていた為、本文を大幅に変更しました。**
2
2
 
3
3
 
4
4
 
5
- HTMLの required 属性は明示的に属性値を変更しなければ、変わる事はありません。
5
+ ### required 属性
6
-
7
- 動的に `required` プロパティのステータスが変更された場合、「required プロパティ」には反映されますが、「required 属性」には反映されません。
8
6
 
9
7
 
10
8
 
11
- - [requiredプロパティとrequired属性 - JSFiddle](https://jsfiddle.net/Lt3emgc1/)
9
+ - [4.10.5 The input element - HTML Standard](https://html.spec.whatwg.org/multipage/input.html#dom-input-required)
10
+
11
+
12
+
13
+ > The accept, alt, max, min, multiple, pattern, placeholder, required, size, src, and step IDL attributes must reflect the respective content attributes of the same name. The dirName IDL attribute must reflect the dirname content attribute. The readOnly IDL attribute must reflect the readonly content attribute. The defaultChecked IDL attribute must reflect the checked content attribute. The defaultValue IDL attribute must reflect the value content attribute.
14
+
15
+
16
+
17
+ (意訳)
18
+
19
+ accept、alt、max、min、multiple、pattern、placeholder、required、size、src、およびstep IDL属性は、同じ名前のそれぞれのコンテンツ属性を[反映(reflect)](https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflect)しなければならない(MUST)。
20
+
21
+
22
+
23
+ 反映(reflect)は後述の「反映型IDL属性 (Reflecting content attributes)」を参照しています。
24
+
25
+
26
+
27
+ ### 反映型IDL属性 (Reflecting content attributes)
28
+
29
+
30
+
31
+ - [2.6.1 Reflecting content attributes in IDL attributes - HTML Standard](https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes)
32
+
33
+
34
+
35
+ > If a reflecting IDL attribute is a boolean attribute, then on getting the IDL attribute must return true if the content attribute is set, and false if it is absent. On setting, the content attribute must be removed if the IDL attribute is set to false, and must be set to the empty string if the IDL attribute is set to true. (This corresponds to the rules for boolean content attributes.)
36
+
37
+
38
+
39
+ (意訳)
40
+
41
+ 反映型IDL属性(Reflecting content attributes)が boolean 属性の場合、IDL属性を取得すると、content属性が設定されている場合はtrueを返し、存在しない場合はfalseを返さなければならない(MUST)。
42
+
43
+ IDL属性がfalseに設定されている場合はコンテンツ属性を削除し、IDL属性がtrueに設定されている場合は空の文字列に設定しなければならない(MUST)。
44
+
45
+ （これは [boolean content 属性](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attribute)のルールに相当する。）
46
+
47
+
48
+
49
+ ### まとめ
50
+
51
+
52
+
53
+ required 属性は「反映型IDL属性 (Reflecting content attributes)」の為、`required` プロパティと同様の結果を得ることが出来ます。
54
+
55
+ ただし、他所からIDL属性が変更された場合は属性値に空文字(falsy)がセットされる為、注意が必要です。
12
56
 
13
57
 
14
58
 
@@ -28,11 +72,19 @@
28
72
 
29
73
  var input = document.querySelector('input[type=text]');
30
74
 
75
+
76
+
77
+ console.log(input.getAttribute('required')); // null (required 属性は存在しない)
78
+
79
+ console.log(input.attributes.getNamedItem('required')); // null (required 属性は存在しない)
80
+
31
81
  input.required = true;
32
82
 
33
- console.log(input.required); // true
83
+ console.log(input.required); // true (反映型IDL属性の規定によって、required 属性が作成され、値は "" になる)
34
84
 
35
- console.log(input.getAttribute('required')); // ""
85
+ console.log(input.getAttribute('required')); // "" (required 属性は存在する)
86
+
87
+ console.log(input.attributes.getNamedItem('required')); // [object Attr] required="" (required 属性は存在する)
36
88
 
37
89
  </script>
38
90
 
@@ -40,13 +92,75 @@
40
92
 
41
93
 
42
94
 
43
- ### required属性を使うためには
95
+ つまり、次のコードの評価値は常に等価となります。
44
96
 
45
97
 
46
98
 
47
- 常に required 属性を操作するならば、この問題は回避できますが、他のコードから `required`プロパティが操作される事はあり得ます。
99
+ ```JavaScript
48
100
 
101
+ input.required;
102
+
103
+ input.getAttribute('required') !== null;
104
+
105
+ Boolean(input.attributes.getNamedItem('required'));
106
+
107
+ ```
108
+
109
+
110
+
111
+ `if` 文に適用すると、次のコードになります。
112
+
113
+
114
+
115
+ ```JavaScript
116
+
117
+ // good
118
+
119
+ if (input.required) {
120
+
121
+ // 処理
122
+
123
+ }
124
+
125
+
126
+
127
+ // good
128
+
129
+ if (input.getAttribute('required') !== null) {
130
+
131
+ // 処理
132
+
133
+ }
134
+
135
+
136
+
137
+ // bad
138
+
139
+ if (input.getAttribute('required')) {
140
+
141
+ // 処理
142
+
143
+ }
144
+
145
+
146
+
147
+ // good
148
+
149
+ if (input.attributes.getNamedItem('required')) {
150
+
151
+ // 処理
152
+
153
+ }
154
+
155
+ ```
156
+
157
+
158
+
159
+ 仕様上、`getAttribute` や `attributes.getNamedItem` で required 属性を参照する事に問題はありません。
160
+
49
- 従って、required 属性を使うためには「**required は属性操作系APIで操作しなければならない**」というコーディング規約を作る必要があるわけですが、そこにコストをかける意味はないと私は思います。
161
+ が、`getAttribute` だけは直観的でない為、直観的でシンプルな `required` プロパティが使われる傾向はあると思います。
162
+
163
+ 後は使う人が判断する事になります。
50
164
 
51
165
 
52
166