javascript～cloneNodeの大実験～めちゃめちゃわかりやすいです。ベビーブームの到来です笑
～初心者のcloneNode大実験～
clone...クローンっていうだけあって同じものを複製できるとかできないとか・・ よくわからないけどやっていきましょう！
今日はjavascript～cloneNodeの大実験です。 果たしてプログラムはちゃんと動くのでしょうか？ 前回のtoggleではスタイルシートのクラスは替えれたけど文字を変えるのに苦労しました。
レベル1 クローン（複製）化する予定の箱を作る。
箱
できました！
実際の記述はこんな感じです
<div class="javawaku" id=hako" >箱</div>
レベル2 id=hakoの要素を取る
var hako =document.getElementById('hako');
レベル3 箱のコピーを作る
早くもcloneNodeの出番です。
var hakocopy= hako.cloneNode();
これで箱のcopy hakocopyが出来上がったよ
レベル4 コピーした箱からノードを取得してみる
ノードってよくわからないけどただのHTMLらしい笑
htmlはouterHTMLで取り出します。
var hakocopy=hako.cloneNode().outerHTML;
レベル5 イベントリスナーを使ってアラート画面にその結果を表示してみる
クリックしてイベントを起こす場合はお決まりのこれ
変数.addEventListener('click', function(){を使います。
hako.addEventListener('click', function(){
alert(hakocopy);
}
レベル6 実際にプログラムを書いてみる
<script>
var hako=document.getElementById('hako');
hako.addEventListener('click', function(){
var hakocopy= hako.cloneNode().outerHTML;
alert(hakocopy);
});
</script>
レベル7 実行結果が気になる
実行結果が気になりますので、早速箱をクリックしてプログラムを実行してみましょう。
実行結果が出ました!
<div class="javawaku" id=hako" >箱</div>
なるほど～こんなのがそのまんま出てくるんですね笑
outerHTMLがないとたぶんその情報オブジェクトが入ってるだけっぽいですね
休憩するので一度アップします。これだけではつまらないのでまだまだ実験していきたいと思います。
レベル8 divをdivで囲んで入れ子にしてみる
<div class="waku3" id="hako2"> <div class="javawaku" >箱2</div> </div>
実際の表示はこんな感じです。idはhako1からhako2に変えて親の方にid="hako2"をつけてみました。
箱2
レベル9 またこの箱のcopyを作る
またこの箱のcopy hakocopy2を作ります。
var hakocopy2=hako2.cloneNode();
レベル10 またこのノードを取る
今回は親ノードの子ノードっていうのがあるみたいなのでそれを取ってみます。
trueを使うと親ノードの子ノードが両方取れます。
親ノードが
<div class="waku3" id="hako2"> (ここに子ノードが入る) </div>
子ノードが
<div class="javawaku" >箱2</div>
です。
var hakocopy2=hako.cloneNode(true).outerHTML;
レベル11 再びプログラムを書く
<script>
var hako2=document.getElementById('hako2');
hako2.addEventListener('click', function(){
var hakocopy2= hako2.cloneNode(true).outerHTML;
alert(hakocopy2);
});
</script>
レベル12 実行結果
上の箱2をクリックするとみなさんも実行結果が確認できます。
実行結果
<div class="waku3" id="hako2"> <div class="javawaku" >箱2</div> </div>
うまくいきました！まだまだ実験の方を続けようと思います。
レベル13 再び箱を作る
<div class="waku3" id="hako3"> <div class="javawaku" id="hako4" >箱4</div> </div>
実際の表示はこうなります。
箱4
レベル14 子供の要素を取得して子供のクローンを作る
子供の要素を取得
var hako4=document.getElementById('hako4');
var childclone=hako4.cloneNode();
レベル15 これを親ノードに挿入する
これを親ノードに挿入するには子の要素.parentNode.appendChild(子のクローン);を使います。
hako4.parentNode.appendChild(childclone);
レベル16 再びプログラムを書く
<script>
var hako4=document.getElementById('hako4');
hako4.addEventListener('click', function(){
var childclone=hako4.cloneNode().
hako4.parentNode.appendChild(childclone);
alert("成功");
});
</script>
レベル17 プログラムの実行結果
子供である箱がクリックする度に増殖しました笑 ベビーブーム到来か?!
みなさんも上の箱4をクリックしてみて下さいね。
つまり親に子がどんどん挿入してる感じですね。
まだまだ実験してみます。
レベル18 再び箱を作る
<div class="waku3" id="hako5"> <div class="javawaku" id="hako6" >箱6</div> </div>
実際の見た目はこんな感じです。
箱6
レベル18 再び子供のクローンを作る
var hako6=document.getElementById('hako6');
var clonechild2=hako6.cloneNode();
レベル19 これを親のクローンに挿入し子供のクローンの高さを取得する
高さを調べるのは子供のクローン.offsetHeight;を使います。
hako6.parentNode.appendChild(clonechild2); var hakonotakasa=clonechild2.offsetHeight;
これをアラート画面で表示する
alert(hakonotakasa);
レベル20 子供のクローンを削除する
子供が増殖しないように子供のクローンを削除する。
クローンを削除するには子供の要素.parentNode.removeChild(子供のクローン);を使います
これでコピーした箱の高さだけがわかって、子供が増殖しないと思います。
hako6.parentNode.removeChild(clonechild2);
レベル21 再びプログラムを書く
<script>
var hako6=document.getElementById('hako6');
hako6.addEventListener('click', function(){
var clonechild2=hako6.cloneNode();
var hakonotakasa=clonechild2.offsetHeight;
alert(hakonotakasa);
hako6.parentNode.removeChild(clonechild2);
});
</script>
レベル22 プログラム実行結果
50と出たので大成功です！
箱も増殖していませんし笑
