【Javascript・DOM】動的なリストの作成とDOMのツリー構造
今日は、DOMを使って、動的にリストを生成します。
テーブルと同様でリストを動的に生成していきたいと思います。
うまく活用出来たら、これで自分だけのリンク集とか作れるんじゃないかなと思います。(生成したHTMLをどう保存するかは学習の必要がある)
この動的なリストの生成を通して、
「少しでも基本的なDOMの構造を整理していきたい」
【DOMとは】
以前も記載しましたが、DOMとは「doccument object model」の略で、HTMLやXMLに含まれる要素にアクセスできる仕組みことだそうです。
DOMを利用することによって、サーバサイドではなく、クライアント側で動的なページを作成できます。
【ノードとツリー構造】
DOMによって、Webページをみると、ノードがツリー状担っている構造となっています。
たとえば、
html要素ノードの下にbody要素ノード
body要素ノードの下にul要素ノードがあり、
ul要素ノードの下にliがあるといった具合に。
自分でツリー構造の図を描画してみると良いかもしれません。
【Webページを構成する三種類のノード】
このノードは今例にだした要素ノード(html,body.head,h1とか)と二種類あります。
・テキストノード
→<h1>ああああ</h1>
の「ああああ」部分。
・属性ノード
→ <p title="ああああ"></p>
の「ああああ」部分。 要素のより詳しい部分の情報を記載している部分です。
これまでの記載を整理すると、
・webページは三種類のノード(要素ノードとテキストノードと属性ノード)の
ツリー構造で構成されている。
【今回の部品とノード】
これから作成する動的なリストでは、新しい要素ノードの追加とその新しいノードの下にさらにテキストノードを追加したノードを追加するという処理を行っています。
例)ul要素ノードにテキストノードを追加したliノードを追加する
【処理の流れ】
最終的なゴールは「要素ulに新しいli要素を追加する」
そのために必要なステップとして、
1、テキストボックスからの値を取得する
2、新しい要素(オブジェクト)liを作成
3、新しい要素(オブジェクト)liのテキストノードを作成
4、2で作成した新しい要素(オブジェクト)liに3で作成した
新しい要素(オブジェクト)liのテキストノードを追加する
5、4で作成したテキストノードが含まれた新しい要素(オブジェクト)liを
要素ulに追加する
※使用メソッド
1、document.getElementById("ID")
→指定したIDのオブジェクトを取得
2、document.createTextNode(”テキスト内容”)
→テキストノードを作成する
3、.オブジェクト名.appendChild(追加するオブジェクト)
→指定したオブジェクトを追加する
【参考ソース】
<html>
<head></head>
<body>
<h2>リストを追加していく部品</h2>
<input type="text" value="" id="list_str"><br>
<input type="button" value="追加"onclick="add(select_list)"><br>
<script Language="JavaScript" type="text/javascript">
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 id="list">
</ul>