回答編集履歴
4
テキスト追加
test
CHANGED
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
|
|
113
113
|
|
|
114
114
|
|
|
115
|
-
というコードによって、変数 `doc` が参照するノードをルートとするDOMツリーがどのようなものになっているのかを表す資料を作成しました。（一枚ものです。
|
|
115
|
+
というコードによって、変数 `doc` が参照するノードをルートとするDOMツリーがどのようなものになっているのかを表す資料を作成しました。（一枚ものです。スライドのタイトル `Figure of DOM tree for the Q#254207 of teratail` をクリックするとspeakerdeckのサイトにいき、拡大表示されます。）
|
|
116
116
|
|
|
117
117
|
|
|
118
118
|
|
3
テキスト追加
test
CHANGED
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
|
|
91
91
|
という解釈よりは、
|
|
92
92
|
|
|
93
|
-
「divが3個並列に並んでいる文字列でもDOMParserはparseしてくれて、ドキュメントノードをルートとする、DOMツリーを構築してくれる。」
|
|
93
|
+
「divが3個並列に並んでいる文字列でもDOMParserはparseしてくれて、(ドキュメントノードをルートとする、) DOMツリーを構築してくれる。」
|
|
94
94
|
|
|
95
95
|
という解釈のほうがより正確です。
|
|
96
96
|
|
2
テキスト追加
test
CHANGED
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
|
|
113
113
|
|
|
114
114
|
|
|
115
|
-
というコードによって、変数 `doc` が参照するノードをルートとするDOMツリーがどのようなものになっているのかを表す資料を作成しました。（一枚ものです）
|
|
115
|
+
というコードによって、変数 `doc` が参照するノードをルートとするDOMツリーがどのようなものになっているのかを表す資料を作成しました。（一枚ものです。マウスをのせると表示されるスライドタイトル `Figure of DOM tree for the Q#254207 of teratail` をクリックするとspeakerdeckのサイトにいき、拡大表示されます。）
|
|
116
116
|
|
|
117
117
|
|
|
118
118
|
|
1
テキスト追加
test
CHANGED
|
@@ -59,3 +59,149 @@
|
|
|
59
59
|
|
|
60
60
|
|
|
61
61
|
- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/qBOZaYb?editors=0012](https://codepen.io/jun68ykt/pen/qBOZaYb?editors=0012)
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
## 追記
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
コメントから頂きました質問に回答します。
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
### 質問 1
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
> ・質問1。
|
|
80
|
+
|
|
81
|
+
> 親要素にdivがなく、divが3個並列に並んでいるものは、DOMではないと思っていたのですが、
|
|
82
|
+
|
|
83
|
+
> parseできているので、divが3個並列に並んでいるものもDOMになるということでしょうか？
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
「divが3個並列に並んでいるものもDOMになる」
|
|
90
|
+
|
|
91
|
+
という解釈よりは、
|
|
92
|
+
|
|
93
|
+
「divが3個並列に並んでいる文字列でもDOMParserはparseしてくれて、ドキュメントノードをルートとする、DOMツリーを構築してくれる。」
|
|
94
|
+
|
|
95
|
+
という解釈のほうがより正確です。
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
ついては、
|
|
100
|
+
|
|
101
|
+
```javascript
|
|
102
|
+
|
|
103
|
+
var str = "<div>要素1</div><div>要素2</div><div>要素3</div>";
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
var parser = new DOMParser();
|
|
108
|
+
|
|
109
|
+
var doc = parser.parseFromString(str, "text/html");
|
|
110
|
+
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
というコードによって、変数 `doc` が参照するノードをルートとするDOMツリーがどのようなものになっているのかを表す資料を作成しました。（一枚ものです）
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
md(!f3237ab600954ae49d6a328f73f6acbc,1.41436464088398)
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
上記の絵をコードで確認するには、`doc` から `firstChild` や `nextSibling` で、ノードをたどっていき、各ノードの、`nodeType`, `tagName`, `nodeValue` といったプロパティの値を確認するとよいかもしれません。
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
### 質問 2
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
> ・質問2。
|
|
134
|
+
|
|
135
|
+
> [...divs]の[...XXX]という記法はどういった処理ですか？
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
`...` は[スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)です。divs は querySelectorAll の返したNodeListオブジェクトが入っています。NodeListオブジェクトは配列（Array)ではありませんが、イテラブル(iterable)なオブジェクトです。イテラブルなオブジェクトに対して、 `...` を使うと、最初から最後までのイテレーションによって発生（yield)された値のシーケンスが得られます。これを`[]` でくくって `[...divs]` とすると、divsの要素を要素とする配列(Array)が得られます。イテラブルとは何か？ということになると、イテレーターについて知る必要があります。以下はMDNの該当ページです。
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
- MDN: [イテレーターとジェネレーター](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators)
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
### 質問 3
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
> ・質問3。
|
|
160
|
+
|
|
161
|
+
正規表現がわからなく調べたのですが、
|
|
162
|
+
|
|
163
|
+
*は直前の文字の0回以上の繰り返しなので、\s*は、0回以上の空白(0回の場合は、空文字)で、
|
|
164
|
+
|
|
165
|
+
つまり、splitで</div>の後の、0回以上の空白で区切っているかと思うのですが、空白を考慮しているのは、
|
|
166
|
+
|
|
167
|
+
<div>要素1</div><div>要素2</div>
|
|
168
|
+
|
|
169
|
+
だけでなく、
|
|
170
|
+
|
|
171
|
+
<div>要素1</div> <div>要素2</div>
|
|
172
|
+
|
|
173
|
+
という文字列にも対応させるためなのかと考えたのですが、
|
|
174
|
+
|
|
175
|
+
では、単なる空文字は*で表現できるのかなと思い、
|
|
176
|
+
|
|
177
|
+
/(?<=</div>)*/
|
|
178
|
+
|
|
179
|
+
と試したところ、正規表現エラーとなりました。
|
|
180
|
+
|
|
181
|
+
<div>要素1</div><div>要素2</div>の場合の</div>の後の空文字は正規表現でどう表現できますか？
|
|
182
|
+
|
|
183
|
+
\s*だと空文字と同時にスペースも含まれますが、これしか表現方法はないですか？
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
はい。おっしゃるとおり、 `\s*` はちょっと気を利かせ過ぎました。
|
|
190
|
+
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
入力される文字列が、`"<div>要素1</div><div>要素2</div><div>要素3</div>"` というような、`</div>`から次の `<div>` までの間に空白文字がない前提であれば `\s*`は不要で、以下
|
|
194
|
+
|
|
195
|
+
|
|
196
|
+
|
|
197
|
+
```javascript
|
|
198
|
+
|
|
199
|
+
var divs = str.split(/(?<=</div>)/);
|
|
200
|
+
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
|
|
205
|
+
で、意図した結果になります。
|
|
206
|
+
|
|
207
|
+
- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/PoPzqba?editors=0012](https://codepen.io/jun68ykt/pen/PoPzqba?editors=0012)
|