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

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

ノードとは？

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

要素ノード

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

テキストノード

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

属性ノード

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

ノードの追加

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

HTMLソース

[sourcecode language=’HTML’]

ノードを追加します。

[/sourcecode]

DOM

[sourcecode language=’Javascript’]
var newText = document.createTextNode(“Create New Text for DOM”);
var addNode = document.getElementById(‘add’);
addNode.appendChild(newText);
[/sourcecode]
id=”add”にappendChildでnewTextを挿入します。newTextとは1行目のcreateTextNodeで作られたテキストのことです。

サンプル

サンプルをご覧下さい。

ノードの移動

HTMLソース

[sourcecode language=’HTML’]

ノードが移動します。

[/sourcecode]

DOM

[sourcecode language=’Javascript’]
var Logo = document.getElementById(‘logo’);
var MoveNode = document.getElementById(‘move’);
MoveNode.appendChild(Logo);
[/sourcecode]
id=”logo”がid=”move”の下に移動します。こちらも同じくappendChildで指定しています。

サンプル

サンプルをご覧下さい。

新しいノード作成

HTMLソース

[sourcecode language=’HTML’]

[/sourcecode]

DOM

[sourcecode language=’Javascript’]
var DivCreate = document.getElementById(‘create’);
newP = document.createElement(“p”);
newText = document.createTextNode(“Create New Text for DOM”)
newP.appendChild(newText);
DivCreate.appendChild(newP);
[/sourcecode]
id=”create”に新たな要素<p>を追加してその<p>の中にnewTextを入れています。
newP.appendChild(newText);がnewTextをnewPの中にいれ、DivCreate.appendChild(newP);でnewPをDivCreateの中に入れています。

サンプル

サンプルをご覧下さい。

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