【Javascript・ＤＯＭ】動的なリストの作成とＤＯＭのツリー構造 - 新卒から文系エンジニア→人材業界に転職した人のブログ

今日は、ＤＯＭを使って、動的にリストを生成します。

テーブルと同様でリストを動的に生成していきたいと思います。

うまく活用出来たら、これで自分だけのリンク集とか作れるんじゃないかなと思います。（生成したＨＴＭＬをどう保存するかは学習の必要がある）

この動的なリストの生成を通して、

　「少しでも基本的なＤＯＭの構造を整理していきたい」

【ＤＯＭとは】

以前も記載しましたが、ＤＯＭとは「doccument object model」の略で、ＨＴＭＬやＸＭＬに含まれる要素にアクセスできる仕組みことだそうです。

DOMを利用することによって、サーバサイドではなく、クライアント側で動的なページを作成できます。

【ノードとツリー構造】

ＤＯＭによって、Ｗｅｂページをみると、ノードがツリー状担っている構造となっています。

たとえば、

html要素ノードの下にbody要素ノード

body要素ノードの下にul要素ノードがあり、

ul要素ノードの下にliがあるといった具合に。

自分でツリー構造の図を描画してみると良いかもしれません。

【Ｗｅｂページを構成する三種類のノード】

このノードは今例にだした要素ノード（html,body.head,h1とか）と二種類あります。

　・テキストノード

　　→<h1>ああああ</h1>

　　　の「ああああ」部分。　

　・属性ノード

　　→ <p title="ああああ"></p>

　　　の「ああああ」部分。　要素のより詳しい部分の情報を記載している部分です。

これまでの記載を整理すると、

　・webページは三種類のノード（要素ノードとテキストノードと属性ノード）の

　　ツリー構造で構成されている。

【今回の部品とノード】　

これから作成する動的なリストでは、新しい要素ノードの追加とその新しいノードの下にさらにテキストノードを追加したノードを追加するという処理を行っています。

例）ul要素ノードにテキストノードを追加したliノードを追加する　

【処理の流れ】

最終的なゴールは「要素ulに新しいli要素を追加する」

そのために必要なステップとして、

１、テキストボックスからの値を取得する

２、新しい要素（オブジェクト）liを作成

３、新しい要素（オブジェクト）liのテキストノードを作成

４、２で作成した新しい要素（オブジェクト）liに３で作成した

　　新しい要素（オブジェクト）liのテキストノードを追加する

５、4で作成したテキストノードが含まれた新しい要素（オブジェクト）liを

　　要素ulに追加する

※使用メソッド

　１、document.getElementById("ＩＤ")

　　　→指定したＩＤのオブジェクトを取得

　２、document.createTextNode（”テキスト内容”）

　　　→テキストノードを作成する

　３、.オブジェクト名.appendChild（追加するオブジェクト）

　　　→指定したオブジェクトを追加する

【参考ソース】

<html>

<body>

<h2>リストを追加していく部品</h2>

count=0;

function add(){

count++;

var newlist=document.createElement("li");

newlist.id="nlist"+count;

var list_value=document.getElementById("list_str").value;

var list_text=document.createTextNode(list_value);

newlist.appendChild(list_text);

document.getElementById("list").appendChild(newlist);

}

</script>

</ul>