Javascript 配列のリスト表示 DOM

◆基本
親要素ノードを取得して、createElementで li タグを作成し、その配下にtext Nodeを作成し、書き込むバージョン。

これだと、id で、各要素を指定できる。（成功版）

<body>
<p>最初のＰ</p>
<ul id="First"></ul>
<p>2度目のＰ</p>
<ul id="Second"></ul>
　<script type="text/javascript">

//id="First"の操作
    /*（1）Pタグの要素ノードオブジェクト*/
  　 var First = document.getElementById('First');
    //(2) createElementにより新しくタグ要素作成
    var liNode1 = document.createElement('li');
  　 /*（3）新たにテキストノードを作成する*/
  　 var textNode1 = document.createTextNode('こんにちは');
  　　/*（4）作成したテキストノードをliタグ要素の子要素として追加する*/
     liNode1.appendChild(textNode1);
  　 /*（5）ulタグに、完成したliタグを追加する*/
  　 First.appendChild(liNode1);
//id="Second"の操作
    /*（1）Pタグの要素ノードオブジェクト*/
  　 var Second = document.getElementById('Second');
    //(2) createElementにより新しくタグ要素作成
    var liNode2 = document.createElement('li');
  　 /*（3）新たにテキストノードを作成する*/
  　 var textNode2 = document.createTextNode('ご無沙汰！');
  　　/*（4）作成したテキストノードをliタグ要素の子要素として追加する*/
     liNode2.appendChild(textNode2);
  　 /*（5）ulタグに、完成したliタグを追加する*/
  　 Second.appendChild(liNode2);
</script>

上記を応用して、これがやりたかったこと。

<body>
<p>◆ Array 全体 </p>
<ul id="wholeArray">
</ul>
<p>◆ 配列の値を１つずつ取り出す </p>
<ul id="elementArray">
</ul>

<p> Quiz 配列の値を１つずつ取り出す </p>
<li> 1. <span id="10000"></span> </li>
<li> 2. <span id="9000"></span> </li>

<script type="text/javascript">
var shuffle = [1,2,3,4,5,6,7,8,9,10];

function run(){
document.getElementById("10000").innerHTML = "for文外での配列再表示(1) " + shuffle;

  for (var i = shuffle.length-1 ; i >=0 ; i--){
   var rand = Math.floor(Math.random()*(i+1));
   var temp = shuffle[i];
   shuffle[i] = shuffle[rand]; //シャッフル処理
   shuffle[rand] = temp;

   //wholeArrayへの追加
   const wholeArray = document.getElementById("wholeArray");
   var liNode1 = document.createElement("li");

   var textNode1 = document.createTextNode("カウント変数 i が"+i+"の時" + shuffle);
   wholeArray.appendChild(liNode1).appendChild(textNode1);

   //ElementArrayへの追加
   const elementArray = document.getElementById("elementArray");
   var liNode2 = document.createElement("li"); 　//　liも別のノード名でちゃんと作成する。

   var textNode2 = document.createTextNode("カウント変数 i が"+ i +"の時の配列要素[i]は " + shuffle[i]);

   elementArray.appendChild(liNode2).appendChild(textNode2);

   }

document.getElementById("9000").innerHTML = "for文外での配列再表示(2) " + shuffle;
}

run();
</script>

◆解説
createTextNode.html
<p id="info"></p>

<script type="text/javascript"> 　
/*（1）Pタグの要素ノードオブジェクト*/ 　
var info = document.getElementById('info'); 　

/*（2）新たにテキストノードを作成する*/ 　
var textNode = document.createTextNode('こんにちは'); 　

/*（3）作成したテキストノードをPタグ要素の子要素として追加する*/ 　
info.appendChild(textNode); </script>

（1）では、テキストを挿入したいPタグの要素ノードオブジェクトを、変数infoに格納します。
（2）では、createTextNodeメソッドに、挿入したい文字を引数に与え、新たに作成されたテキストノードオブジェクトを変数textNodeに格納します。createTextNodeメソッドはdocumentオブジェクトに定義されているメソッドですので、必ずdocument.createTextNode('文字列')といった具合に使ってください。createTextNodeメソッドでテキストノードを新たに作成しても、すぐにはブラウザ上に反映されません。まだ仮想的に作られたにすぎず、HTML上のどの要素にも関連付けられていないのです。この宙に浮いているテキストノードを、appendChildメソッドで関連付けるわけです。
（3）では、appendChildメソッドに、先ほど作成したテキストノードオブジェクトを引数として与えて、ブラウザ上に表示させています。apendChildメソッドは、要素ノードオブジェクトに定義されたメソッドです。そのため、テキストを挿入したい要素ノードオブジェクトに対してappendChildメソッドを実行することで、その場所にテキストノードが追加されるのです。ここでは、Pタグの要素ノードオブジェクトinfoに対してappendChildメソッドを呼び出していますので、<p id="info">こんにちは</p>という状態ができあがったのです。

◆ 新しいタグを追加しつつテキストを追加する場合

<body> 　 <p id="info"></p> </body>

<script type="text/javascript"> 　

/*（1）Pタグの要素ノードオブジェクト*/ 　
var info = document.getElementById('info'); 　

/*（2）新たにH1タグの要素ノードを作成する*/ 　
var h1Node = document.createElement('h1'); 　

/*（3）新たにテキストノードを作成する*/ 　
var textNode = document.createTextNode('こんにちは'); 　

/*（4）作成したテキストノードをH1タグ要素の子要素として追加する*/ 　
h1Node.appendChild(textNode); 　

/*（1）Pタグに、完成したH1タグを追加する*/ 　
info.appendChild(h1Node);
</script>

2．項目をリスト表示する。

http://jsstudy.hatenablog.com/entry/javascript-primer-3-10-array

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3-10_array</title>
</head>
<body>
    <h1>やることリスト</h1>
    <ul id="list">
    </ul>
    <script>
        var todo = ['デザインカンプ作成', 'データ整理', '勉強会申し込み', '牛乳買う'];
        todo.push('歯医者に行く');
        for (var i = 0; i < todo.length; i++) {
            var li = document.createElement('li');
            li.textContent = todo[i];
            document.getElementById('list').appendChild(li);　//document.writeのように上書きされない。
        }
    </script>
</body>
</html>

◆応用
上記をつかいならが、２つの要素を記入するスクリプトを書いてみる。

<wholeArray>と<elementArray>の両方に書き込みたいのだが、
片方なら上手く表示されるが、両方一遍にだと、上手くいかない

<body>
<p>◆ Array 全体 </p>
<ul id="wholeArray">
</ul>
<p>◆ 配列の値を１つずつ取り出す </p>
<ul id="elementArray">
</ul>
<script type="text/javascript">

var shuffle = [1,2,3,4,5,6,7,8,9,10];

function run(){
document.getElementById("10000").innerHTML = "for文外での配列再表示(1) " + shuffle;

  for (var i = shuffle.length-1 ; i >=0 ; i--){
   var rand = Math.floor(Math.random()*(i+1));
   var temp = shuffle[i];
   shuffle[i] = shuffle[rand]; //シャッフル処理
   shuffle[rand] = temp;

   var li = document.createElement("li");  //要素ノードの作成
   li.textContent = "カウント変数 i が"+i+"の時" + shuffle;　//配列全体表示
   document.getElementById('wholeArray').appendChild(li);

   //li.textContent = "カウント変数 i が"+ i +"の時の配列要素[i]は、" + shuffle[i];　//配列要素表示
   //document.getElementById("elementArray").appendChild(li);

   /*（1）Pタグの要素ノードオブジェクト*/ 　
   var elementArray = document.getElementById('elementArray'); 　
   /*（2）新たにテキストノードを作成する*/ 　
   var textNode = document.createTextNode("カウント変数 i が"+ i +"の時の配列要素[i]は ver2、" + shuffle[i]); 　
   /*（3）作成したテキストノードをPタグ要素の子要素として追加する*/ 　
  // elementArray.appendChild(textNode);

   }

}

run();
</script>

参考）
http://jsstudy.hatenablog.com/entry/javascript-primer-3-10-array

プログラムを独学する時のメモページ

☆☆ 新着記事 ☆☆

2018年9月23日日曜日

Javascript 配列のリスト表示 DOM

0 件のコメント:

コメントを投稿

このブログを検索