【Javascript】removeChild は 削除ではない
Category JavaScript
2012/06/06
問題
親要素.removeChild(子ノード) したら、きれいに消えるんだよねっ♪
答え
DOMツリーから除去されただけで、消えていない。メモリ内に存在する。
MDNのリファレンスなどにはばっちり書いてある。
概要
removeChild はDOMから子ノードを取り除きます。
構文
oldChild = element.removeChild(child)
- child はDOMから取り除く、子ノードです。
- element は child の親ノードです。
- oldChild は 取り除かれた子ノードへの参照を保持します。oldChild と child は等価です。
取り除かれた子ノードはしばらくは記憶領域上に残りますが、もうDOMの一部ではありません。取り除いたノードは、oldChild オブジェクト参照を通じて、コード中で後で再利用することができます。
https://developer.mozilla.org/ja/DOM/element.removeChild
https://developer.mozilla.org/en/DOM/element.removeChild
そのため、以下のコードはIEでもFirefoxでもChromeでも、ちゃんと動作する。
//ある要素の
var parent = document.getElementById('A');
//最初の子要素をremoveChildした → この時点でDOMツリーから除去されて表示からも消える
var child = parent.removeChild(parent.firstChild);
//そのあと
//別な要素に
var otherParent = document.getElementById('B');
//appendすると、再登場！
otherParent.appendChild(child);
デモ
https://www.softel.co.jp/blogs/tech/archives/demo/d20120606
後で参照するつもりがなかったら、removeChildしたノードは消えたものと考えてよいと思いますが、こういうことになっているんですよのメモでした。
コメント