teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

4

名前の衝突リスク

2019/11/02 09:11

投稿

think49
think49

スコア18194

answer CHANGED
@@ -11,8 +11,31 @@
11
11
  </script>
12
12
  ```
13
13
 
14
- name属性値が文書中で一意前提でコードを書くと、`TypeError` になる為、単数/複数ともに対応できるように条件分岐で処理分けする事で拡張性担保できるようになります。
14
+ form要素のname属性値がname属性値重複しない場合、`document.formName` は**要素ノード**返します。
15
15
 
16
+ ```HTML
17
+ <form name="foo"></form>
18
+ <script>
19
+ console.log(document.foo); // <form name="foo"></form>```
20
+ </script>
21
+ ```
22
+
23
+ 将来的にHTML文書が変更されて、返り値が上記2つの状態に変化することを想定するなら、条件分岐処理でどちらのパターンにも対応できるように書かなければなりません。
24
+
25
+ ```JavaScript
26
+ const foo = document.foo; // 要素ノードかHTMLCollectionか不明なノード
27
+ const fooList = foo.length ? foo : [foo]; // HTMLCollection でなければ、配列に格納しておく
28
+
29
+ for (let i = 0, len = fooList.length; i < len; ++i) {
30
+ const foo = fooList[i];
31
+
32
+ if (foo.tagName === 'FORM') {
33
+ console.log(foo); // <form name="foo"></form>
34
+ break;
35
+ }
36
+ }
37
+ ```
38
+
16
39
  ### 既存の名前空間を破壊する
17
40
 
18
41
  `document.body` のように予め用意されたプロパティであっても、容赦なく破壊します。
@@ -43,8 +66,30 @@
43
66
  document.forms['formName']
44
67
  ```
45
68
 
69
+ form要素ノードに限定されている為、`<img name>` 等の他要素のname属性値と衝突する事はありません。
46
70
  `document.forms` は **HTMLCollection** を返すAPIで現在でも実用できます。
47
71
 
72
+ ただし、HTMLCollection は `id` または `name` 属性値を検索するので、id属性値とは衝突します。
73
+ DOM Standard仕様上は「コレクションの中で初めに出現する要素」を参照します。
74
+
75
+ - [4.2.10.2. Interface HTMLCollection - DOM Standard](https://dom.spec.whatwg.org/#interface-htmlcollection)
76
+
77
+ > Return the first element in the collection for which at least one of the following is true:
78
+ >
79
+ > - it has an ID which is key;
80
+ > - it is in the HTML namespace and has a name attribute whose value is key;
81
+
82
+ が、「Google Chrome 78.0.3904.87」は順序に関わらず、id属性値を優先しました。
83
+ name属性値と衝突しないように気をつけた方が良さそうです。
84
+
85
+ ```HTML
86
+ <form name="foo"></form>
87
+ <form id="foo"></form>
88
+ <script>
89
+ console.log(document.forms['foo']); // <form id="foo"></form>
90
+ </script>
91
+ ```
92
+
48
93
  ### 古いAPIが使えないわけではない
49
94
 
50
95
  `querySelector` がある今現在でも `getElementById` は現役です。

3

typo修正

2019/11/02 09:11

投稿

think49
think49

スコア18194

answer CHANGED
@@ -1,4 +1,4 @@
1
- ### <form name> はform要素の中で一意である
1
+ ### <form name> はform要素の中で一意である
2
2
 
3
3
  name属性を持つのは、form要素だけではありません。
4
4
  同じname属性値を持つ要素が複数存在した場合、`document.formName` は **HTMLCollection** を返します。
@@ -35,7 +35,7 @@
35
35
 
36
36
  ### document.forms
37
37
 
38
- `form.formname` 下記コードの簡易版です。
38
+ `form.formname` 下記コードの簡易版です。
39
39
 
40
40
  - [document.forms - HTML Standard 日本語訳](https://momdo.github.io/html/dom.html#dom-document-forms)
41
41
 

2

変換ミス

2019/11/02 01:32

投稿

think49
think49

スコア18194

answer CHANGED
@@ -31,7 +31,7 @@
31
31
  ```
32
32
 
33
33
  本事象を回避する為に、組み込みのプロパティ名が**ドット記法で参照可能な名前に限定**されている事に着目し、ドット記法では表せない名前にする方法があります。
34
- 例えば、`-` はその一つであり、Selectors APIとも愛称が良いので、お勧めです。
34
+ 例えば、`-` はその一つであり、Selectors APIとも相性が良いので、お勧めです。
35
35
 
36
36
  ### document.forms
37
37
 

1

typo修正

2019/11/02 01:28

投稿

think49
think49

スコア18194

answer CHANGED
@@ -11,7 +11,7 @@
11
11
  </script>
12
12
  ```
13
13
 
14
- name属性値が文書中で一意の前提でコードを書くと、`TypeError` になる為、単数/複数ともに対応できるように上9件分岐で処理分けする事で拡張性を担保できるようになります。
14
+ name属性値が文書中で一意の前提でコードを書くと、`TypeError` になる為、単数/複数ともに対応できるように件分岐で処理分けする事で拡張性を担保できるようになります。
15
15
 
16
16
  ### 既存の名前空間を破壊する
17
17