読者です 読者をやめる 読者になる 読者になる

FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

【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>

 

.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }