回答編集履歴
4
テキスト追加
answer
CHANGED
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
var doc = parser.parseFromString(str, "text/html");
|
|
56
56
|
```
|
|
57
57
|
|
|
58
|
-
というコードによって、変数 `doc` が参照するノードをルートとするDOMツリーがどのようなものになっているのかを表す資料を作成しました。（一枚ものです。
|
|
58
|
+
というコードによって、変数 `doc` が参照するノードをルートとするDOMツリーがどのようなものになっているのかを表す資料を作成しました。（一枚ものです。スライドのタイトル `Figure of DOM tree for the Q#254207 of teratail` をクリックするとspeakerdeckのサイトにいき、拡大表示されます。）
|
|
59
59
|
|
|
60
60
|
md(!f3237ab600954ae49d6a328f73f6acbc,1.41436464088398)
|
|
61
61
|
|
3
テキスト追加
answer
CHANGED
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
|
|
45
45
|
「divが3個並列に並んでいるものもDOMになる」
|
|
46
46
|
という解釈よりは、
|
|
47
|
-
「divが3個並列に並んでいる文字列でもDOMParserはparseしてくれて、ドキュメントノードをルートとする、DOMツリーを構築してくれる。」
|
|
47
|
+
「divが3個並列に並んでいる文字列でもDOMParserはparseしてくれて、(ドキュメントノードをルートとする、) DOMツリーを構築してくれる。」
|
|
48
48
|
という解釈のほうがより正確です。
|
|
49
49
|
|
|
50
50
|
ついては、
|
2
テキスト追加
answer
CHANGED
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
var doc = parser.parseFromString(str, "text/html");
|
|
56
56
|
```
|
|
57
57
|
|
|
58
|
-
というコードによって、変数 `doc` が参照するノードをルートとするDOMツリーがどのようなものになっているのかを表す資料を作成しました。（一枚ものです）
|
|
58
|
+
というコードによって、変数 `doc` が参照するノードをルートとするDOMツリーがどのようなものになっているのかを表す資料を作成しました。（一枚ものです。マウスをのせると表示されるスライドタイトル `Figure of DOM tree for the Q#254207 of teratail` をクリックするとspeakerdeckのサイトにいき、拡大表示されます。）
|
|
59
59
|
|
|
60
60
|
md(!f3237ab600954ae49d6a328f73f6acbc,1.41436464088398)
|
|
61
61
|
|
1
テキスト追加
answer
CHANGED
|
@@ -28,4 +28,77 @@
|
|
|
28
28
|
console.log(divs); // => ["<div>要素1</div>", "<div>要素2</div>", "<div>要素3</div>"]
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/qBOZaYb?editors=0012](https://codepen.io/jun68ykt/pen/qBOZaYb?editors=0012)
|
|
31
|
+
- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/qBOZaYb?editors=0012](https://codepen.io/jun68ykt/pen/qBOZaYb?editors=0012)
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
## 追記
|
|
35
|
+
|
|
36
|
+
コメントから頂きました質問に回答します。
|
|
37
|
+
|
|
38
|
+
### 質問 1
|
|
39
|
+
|
|
40
|
+
> ・質問1。
|
|
41
|
+
> 親要素にdivがなく、divが3個並列に並んでいるものは、DOMではないと思っていたのですが、
|
|
42
|
+
> parseできているので、divが3個並列に並んでいるものもDOMになるということでしょうか？
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
「divが3個並列に並んでいるものもDOMになる」
|
|
46
|
+
という解釈よりは、
|
|
47
|
+
「divが3個並列に並んでいる文字列でもDOMParserはparseしてくれて、ドキュメントノードをルートとする、DOMツリーを構築してくれる。」
|
|
48
|
+
という解釈のほうがより正確です。
|
|
49
|
+
|
|
50
|
+
ついては、
|
|
51
|
+
```javascript
|
|
52
|
+
var str = "<div>要素1</div><div>要素2</div><div>要素3</div>";
|
|
53
|
+
|
|
54
|
+
var parser = new DOMParser();
|
|
55
|
+
var doc = parser.parseFromString(str, "text/html");
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
というコードによって、変数 `doc` が参照するノードをルートとするDOMツリーがどのようなものになっているのかを表す資料を作成しました。（一枚ものです）
|
|
59
|
+
|
|
60
|
+
md(!f3237ab600954ae49d6a328f73f6acbc,1.41436464088398)
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
上記の絵をコードで確認するには、`doc` から `firstChild` や `nextSibling` で、ノードをたどっていき、各ノードの、`nodeType`, `tagName`, `nodeValue` といったプロパティの値を確認するとよいかもしれません。
|
|
64
|
+
|
|
65
|
+
### 質問 2
|
|
66
|
+
|
|
67
|
+
> ・質問2。
|
|
68
|
+
> [...divs]の[...XXX]という記法はどういった処理ですか？
|
|
69
|
+
|
|
70
|
+
`...` は[スプレッド構文](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax)です。divs は querySelectorAll の返したNodeListオブジェクトが入っています。NodeListオブジェクトは配列（Array)ではありませんが、イテラブル(iterable)なオブジェクトです。イテラブルなオブジェクトに対して、 `...` を使うと、最初から最後までのイテレーションによって発生（yield)された値のシーケンスが得られます。これを`[]` でくくって `[...divs]` とすると、divsの要素を要素とする配列(Array)が得られます。イテラブルとは何か？ということになると、イテレーターについて知る必要があります。以下はMDNの該当ページです。
|
|
71
|
+
|
|
72
|
+
- MDN: [イテレーターとジェネレーター](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators)
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
### 質問 3
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
> ・質問3。
|
|
81
|
+
正規表現がわからなく調べたのですが、
|
|
82
|
+
*は直前の文字の0回以上の繰り返しなので、\s*は、0回以上の空白(0回の場合は、空文字)で、
|
|
83
|
+
つまり、splitで</div>の後の、0回以上の空白で区切っているかと思うのですが、空白を考慮しているのは、
|
|
84
|
+
<div>要素1</div><div>要素2</div>
|
|
85
|
+
だけでなく、
|
|
86
|
+
<div>要素1</div> <div>要素2</div>
|
|
87
|
+
という文字列にも対応させるためなのかと考えたのですが、
|
|
88
|
+
では、単なる空文字は*で表現できるのかなと思い、
|
|
89
|
+
/(?<=</div>)*/
|
|
90
|
+
と試したところ、正規表現エラーとなりました。
|
|
91
|
+
<div>要素1</div><div>要素2</div>の場合の</div>の後の空文字は正規表現でどう表現できますか？
|
|
92
|
+
\s*だと空文字と同時にスペースも含まれますが、これしか表現方法はないですか？
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
はい。おっしゃるとおり、 `\s*` はちょっと気を利かせ過ぎました。
|
|
96
|
+
|
|
97
|
+
入力される文字列が、`"<div>要素1</div><div>要素2</div><div>要素3</div>"` というような、`</div>`から次の `<div>` までの間に空白文字がない前提であれば `\s*`は不要で、以下
|
|
98
|
+
|
|
99
|
+
```javascript
|
|
100
|
+
var divs = str.split(/(?<=</div>)/);
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
で、意図した結果になります。
|
|
104
|
+
- **動作確認用CodePen:** [https://codepen.io/jun68ykt/pen/PoPzqba?editors=0012](https://codepen.io/jun68ykt/pen/PoPzqba?editors=0012)
|