現在DOMの勉強をしていますが、なかなか時間が取れず最近怠っていました。
一日少しずつでも進めていきたいと思います！

。。。意気込みはこのへんにして、早速本題に入りましょう。
タイトルにある通り「DOM」を使用して色々操作してみます。
といっても、ノードの追加などをするだけですけど。

ノードとは？

先程からノードとノードと言ってますが、DOMには「要素ノード」「テキストノード」「属性ノード」があります。

要素ノード

HTMLの<p>、<div>などが要素ノード(Element Nodes)です。

テキストノード

要素の中の見出しテキストのことをさします。インデントや改行もテキストノードとして扱われます。

属性ノード

要素につけられたstyle属性もノードになります。

ノードの追加

では早速ノードを追加してみましょう。

HTMLソース

<p id="add">ノードを追加します。</p>

DOM

var newText = document.createTextNode("Create New Text for DOM");
var addNode = document.getElementById('add');
addNode.appendChild(newText);

id=”add”にappendChildでnewTextを挿入します。newTextとは1行目のcreateTextNodeで作られたテキストのことです。

サンプル

サンプルをご覧下さい。

ノードの移動

HTMLソース

<p id="move">ノードが移動します。</p>
<p id="logo"><img src="http://www.web-park.org/img/share/cat01.png" /></p>

DOM

var Logo = document.getElementById('logo');
var MoveNode = document.getElementById('move');
MoveNode.appendChild(Logo);

id=”logo”がid=”move”の下に移動します。こちらも同じくappendChildで指定しています。

サンプル

サンプルをご覧下さい。

新しいノード作成

HTMLソース

<div id="create">新たにノードを作成します。</div>

DOM

var DivCreate = document.getElementById('create');
newP = document.createElement("p");
newText = document.createTextNode("Create New Text for DOM")
newP.appendChild(newText);
DivCreate.appendChild(newP);

id=”create”に新たな要素<p>を追加してその<p>の中にnewTextを入れています。
newP.appendChild(newText);がnewTextをnewPの中にいれ、DivCreate.appendChild(newP);でnewPをDivCreateの中に入れています。

サンプル

サンプルをご覧下さい。

1. Web-Parkのホーム > 
2. Javascript > 
3. DOMで色々操作してみよう