【Javascript・DOM】動的なリストの作成とDOMのツリー構造③
【今回やること】
今回も前回の続き。
前回の動的なリストに以下の点を追加します。
・今回はユーザが選択するリストに<a href>を追加し、リンク設定を出来るようにする
【ノードの構造】
今回のノードの構造は以下のなっていると思います。
※bodyのところでもっと枝分かれ(selectとか)すると思いますが、今回の変更部部のみ対象部分にします。
html(要素ノード)→body(要素ノード)→
ul(要素ノード)→li(要素ノード)→a(要素ノード)→href(属性ノード)
a(要素ノード)→テキストノード
【処理の流れ】
1、<a>要素のノードの作成
2、<a>要素のノードのhref属性にユーザ入力したURLを入れる
3、<a>要素のテキストノードにユーザ入力した値を入れる
4、3までで作成したa要素のノードをliの要素ノードに下にくっつける
5、最後に4でくっつけたノードをユーザがプルダウンで選択したリスト(ul)に
追加する
【学習方法について】
思った通り動くなかなか楽しい。
自分で理解しながらかけるには以下のことが必要そうな気がする。
・人のソースを写す
・DOMに関して体系的に書いてある本を読む
わからない→ネット検索
ばかりだと一部分の解決方法しか分からない。
はっきりいって初めての学習者にはきつい。
自分のやっていることの全体像がわかる本がてもとにあるとちょうどいいかも。
いまのところはこのサイクルかもなーと思っています
1、人のソースをうつす
2、わからない部分をネットで調べる
3、全体像のわかる本を読む
4、作りたいもの・実現したらワクワクする動作を行うものを作ってみる
5、わからないことがあったら調べる
【参考ソース】
<html>
<head></head>
<body>
<h2>リストを追加していく部品</h2>
<select onChange="select_list=this.options[this.selectedIndex].value" size="1">
<option value="" ></option>
<option value="list1" >リスト1</option>
<option value="list2" >リスト2</option>
<input type="text" value="" id="Input_str">
<input type="text" value="" id="Input_list_url"><br>
<input type="button" value="追加"onclick="add(select_list)"><br>
<script Language="JavaScript" type="text/javascript">
count=0;
function add(select_list){
count++;
var list_value=document.getElementById("Input_str").value;
var url1=document.getElementById("Input_list_url").value;
list_url=document.createElement("a");
list_url.href=url1;
var list_text=document.createTextNode(list_value);
list_url.appendChild(list_text);
var new_list=document.createElement("li");
new_list.id="new_list"+count;
new_list.appendChild(list_url);
document.getElementById(select_list).appendChild(new_list);
}
</script>
<ul id="list">
</ul>
</br>
</br>
</br>
</br>
</br>
</br>
<ul id="list1">
</ul>
</br>
</br>
</br>
</br>
</br>
</br>
<ul id="list2">
</ul>
</body>
</html>