DOMおれおれAdvent Calendar 2015 – 11日目

2015-12-11

画面上では連続したひとかたまりの文字列でも、実は複数の文字列ノードから成っている場合もあります。普通にHTML書いてもそうはならんのだけど、JavaScriptからあれこれ挿入したりするとそうなります。

1
2
3
4
5
6
7
8
9
var el = document.createElement('span');
 
for (var i=0, l=10; i<l; i++) {
  var t = document.createTextNode(i + ' ');
  el.appendChild(t);
}
 
console.log(el.childNodes.length);  // => 10
// el = <span>0 1 2 3 4 5 6 7 8 9 </span>

そういうのをぱぱーっとまとめてくれるのが、 normalize() です。

1
2
3
4
5
6
7
8
9
10
var el = document.createElement('span');
 
for (var i=0, l=10; i<l; i++) {
  var t = document.createTextNode(i + ' ');
  el.appendChild(t);
}
el.normalize();
 
console.log(el.childNodes.length);  // => 1
// el = <span>0 1 2 3 4 5 6 7 8 9 </span>

ちなみに空の文字列ノードも削除してくれるみたいです。空白文字で構成される文字列ノードは残ります。

参考