templateタグでtodoリスト

Qiita

templateタグを使う - Qiita

https://qiita.com/keiskimu/items/649fd3de770ba88802e3

MDNを参考に、templateタグをつかって簡単なTODOリストをつくってみる。htmlファイルを用意する最低限必要なのは入力フォームとTODOが追加されていくリスト、そして今回の肝であるtemplate。とりあえず↓の...

このtodoリストには「追加」「削除」はあるが、「検索」「更新」はないので留意する。

1 ★ソースコード
2 html
3 js
4 メモ

★ソースコード

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
 
 <div>
   <input type="text" id="title" />
   <button id="add">Add</button>
 </div>
 
 <ul id="todo">
  
   <!-- ここからtemplate要素 -->
   <template id="template">
     <li>
       <span>titleが入る</span>
       <button>delete</button>
     </li>
   </template>
   
 </ul>
  
</body>
<script src="app.js"></script>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div>

</div>

<li>

<span>titleが入る</span>

<button>delete</button>

</li>

</template>

</ul>

</body>

</html>

js

// jsでtemplateを扱う
(function(){
  // 1. template要素を取得
  var template = document.getElementById('template');
  
  // titleを入力するinput要素
  var title = document.getElementById('title');
  
  // todoリスト
  var todo = document.getElementById('todo');
  
  // Addボタン
  document.getElementById('add').addEventListener('click', function(){
    
    //入力されてなければ何もしない
    if (!title.value) return;

    // 2. 複製
    var clone = document.importNode(template.content, true);
    
    // 3. なにかする
    // 背景色を変更
    clone.firstElementChild.style.background = '#'+Math.floor(Math.random()*16777215).toString(16);
    
    // 入力されたtitleをいれる
    clone.querySelector('span').textContent = title.value;
    
    // ボタンが押されたらリストから削除する
    clone.querySelector('button').addEventListener('click', function(){
      var parent = this.parentNode;
      parent.parentNode.removeChild(parent);
      
    });
    
    //複製した要素をリストに追加する
    todo.insertBefore(clone, todo.firstChild);
    
    // titleの値を空にしておく
    title.value = '';

  });
  
})();

// jsでtemplateを扱う

(function(){

// 1. template要素を取得

var template = document.getElementById('template');

// titleを入力するinput要素

var title = document.getElementById('title');

// todoリスト

var todo = document.getElementById('todo');

// Addボタン

document.getElementById('add').addEventListener('click', function(){

//入力されてなければ何もしない

if (!title.value) return;

// 2. 複製

var clone = document.importNode(template.content, true);

// 3. なにかする

// 背景色を変更

clone.firstElementChild.style.background = '#'+Math.floor(Math.random()*16777215).toString(16);

// 入力されたtitleをいれる

clone.querySelector('span').textContent = title.value;

// ボタンが押されたらリストから削除する

clone.querySelector('button').addEventListener('click', function(){

var parent = this.parentNode;

parent.parentNode.removeChild(parent);

});

//複製した要素をリストに追加する

todo.insertBefore(clone, todo.firstChild);

// titleの値を空にしておく

title.value = '';

});

})();

メモ

MDN Web Docs

<template>: コンテンツテンプレート要素

https://developer.mozilla.org/ja/docs/Web/HTML/Element/template

HTML のコンテンツテンプレート (template) 要素は、すなわちページの読み込み時にすぐには描画されないものの、後で JavaScript を使用してインスタンスを生成できる HTML を保持するメカニズムです。

HTML のコンテンツテンプレート (template) 要素は、すなわちページの読み込み時にすぐには描画されないものの、後で JavaScript を使用してインスタンスを生成できる HTML を保持するメカニズムです。
テンプレートは、文書内に格納されたコンテンツの断片として考えてください。
ページの読み込み時にパーサーが template要素の内容を処理している間、その内容の有効性のみが検証されます。
しかし、要素の内容は描画されません。
※templateタグは、単体では表示されない。必ずjsと組み合わせること。
※jsを使って、template要素内のタグを複製できたりする？

IT用語辞典 e-Words

パーサとは - IT用語辞典

http://e-words.jp/w/%E3%83%91%E3%83%BC%E3%82%B5.html

パーサ【parser / パーザ】とは、コンピュータプログラムのソースコードやXML文書など、何らかの言語で記述された構造的な文字データを解析し、プログラムで扱えるようなデータ構造の集合体に変換するプログラムのこと。そのような処理のことを「構文解析」「パース...

パーサーとは、コンピュータプログラムのソースコードやXML文書など、何らかの言語で記述された構造的な文字データを解析し、プログラムで扱えるようなデータ構造の集合体に変換するプログラムのこと。
※templateタグの解析に、パーサーが使われる？
そのような処理のことを「構文解析」「パース」（parse）という。
解析対象となるテキストデータが記述された言語の語彙や記法、文法などのルールを元に、記述内容を要素や属性などに分け、それらの間の関係を読み取って木構造（ツリー）などのデータ構造や何らかのデータ記述言語による表記として出力する。
パーサはそれ単体で利用されることはあまりなく、何らかの処理をするための前段階として使われることが多いため、汎用のサブルーチンやモジュール、ライブラリなどとして提供されることが多い。
プログラミング言語などのコンピュータ言語を対象とするものが多いが、日本語や英語など人間が使う自然言語の文章を対象とするものもある。
文章を読み込んで形態素解析（分かち書きをしない日本語などの文章を単語に分解する）や構文解析（単語間の関連を確定する）などを行い、何らかの形式のデータ構造として表現する。

SYNCER

Document.importNode() - 外部からノードを複製する | DOMリファレンス

https://lab.syncer.jp/Web/API_Interface/Reference/IDL/Document/importNode/

importNode()は、Documentのメソッドです。外部のドキュメントから自身のドキュメントにノードを複製します。元のノードはなくなりません。

importNode()は、Documentのメソッドです。
外部のドキュメントから自身のドキュメントにノードを複製します。
元のノードはなくなりません。

MDN Web Docs

Document.importNode()

https://developer.mozilla.org/ja/docs/Web/API/Document/importNode

Document オブジェクトの importNode() メソッドは、後で現在の文書に挿入するために、他の文書から Node または DocumentFragment の複製を作成します。

●メモ
外部ドキュメントからのノードは、現在のドキュメントに挿入する前に document.importNode() を使ってクローンを作るべきです。

●構文

var node = document.importNode(externalNode, deep);

1	var node = document.importNode(externalNode, deep);

・node（例題ではcloneと記載）
インポートするノードのスコープにあるコピーされたノードです。
この新しいノードはまだドキュメントツリーに挿入されていないので、 Node.parentNode は null です。

・externalNode
現在の文書にインポートする、外部の Node または DocumentFragment です。

・deep
真偽値で、 externalNode の DOM サブツリー全体をインポートするかどうかを制御します。
→deep が true に設定された場合、 externalNode およびその子孫全てが複製されます。
→deep が false に設定された場合、 externalNode のみがインポートされます

SYNCER

Element.firstElementChild

https://syncer.jp/javascript-reference/element/firstelementchild

最初の子要素を取得する。

JavaScriptの、ElementオブジェクトのfirstElementChildは最初の子要素を取得するプロパティです。
ElementオブジェクトのfirstElementChildプロパティは、最初の子要素を含みます。
子要素がない場合はnullが返ります。

<ul id="target">
	<li>要素1</li>
	<li>要素2</li>
	<li>要素3</li>
</ul>

<script>
	// 要素を取得 ( → <ul id="target"> ... </ul> )
	var ulElement = document.getElementById( "target" ) ;
	// 最初の子要素を取得 ( → <li>要素1</li> )
	var firstElementChild = ulElement.firstElementChild ;
</script>

</ul>

// 要素を取得 ( → <ul id="target"> ... </ul> )

var ulElement = document.getElementById( "target" ) ;

// 最初の子要素を取得 ( → <li>要素1</li> )

var firstElementChild = ulElement.firstElementChild ;

</script>

MDN Web Docs

Object.values()

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/values

Object.values() メソッドは、指定されたオブジェクトが持つ列挙可能なプロパティの値を、 for...in ループで提供される場合と同じ順序で配列にして返します。 (違いは、 for...in ループではプロパティチェーン上のプロパティも同様に列挙するという点だけです。)

Object.values() メソッドは、指定されたオブジェクトが持つ列挙可能なプロパティの値を、 for…in ループで提供される場合と同じ順序で配列にして返します。

const object1 = {
  a: 'somestring',
  b: 42,
  c: false
};
console.log(Object.values(object1));
// expected output: Array ["somestring", 42, false]

const object1 = {

a: 'somestring',

b: 42,

c: false

};

console.log(Object.values(object1));

// expected output: Array ["somestring", 42, false]

●構文
Object.values(obj)
→obj：返されることになる列挙可能な自身のプロパティの値を持つオブジェクト。
→返り値：与えられたオブジェクトが所有する列挙可能なプロパティの値が入った配列。

const obj = { foo: 'bar', baz: 42 };
console.log(Object.values(obj)); // ['bar', 42]

1 2	const obj = { foo: 'bar', baz: 42 }; console.log(Object.values(obj)); // ['bar', 42]

かずきちブログ

【入門】【初心者】javascript・jQuery部中級「制御文まとめ」

https://webukatu.com/wordpress/blog/1199

これは、オンラインプログラミング学習サービス「ウェブカツ!!」にて、 javascript・jQuery部中級 ...

for in：配列の１個１個のキーを取り出してくれる

var arr = ['HTML', 'CSS', 'javascript', 'PHP', 'ネットワーク・サーバー・セキュリティ', '営業', '起業'];
for(var key in arr){
console.log('ウェブカツで学ぶのは' + key + 'です。');
}
//ウェブカツで学ぶのは0です。
//ウェブカツで学ぶのは1です。
//ウェブカツで学ぶのは2です。
//ウェブカツで学ぶのは3です。
//ウェブカツで学ぶのは4です。
//ウェブカツで学ぶのは5です。
//ウェブカツで学ぶのは6です。
//ーーーーーーーーーーーーーーーーーー
// キーしか取れないので、値を取得したいならこう使う
//ーーーーーーーーーーーーーーーーーー
for(var key in arr){
console.log('ウェブカツで学ぶのは' + arr[key] + 'です。');
}
//ウェブカツで学ぶのはHTMLです。
//ウェブカツで学ぶのはCSSです。
//ウェブカツで学ぶのはjavascriptです。
//ウェブカツで学ぶのはPHPです。
//ウェブカツで学ぶのはネットワーク・サーバー・セキュリティです。
//ウェブカツで学ぶのは営業です。
//ウェブカツで学ぶのは起業です。

var arr = ['HTML', 'CSS', 'javascript', 'PHP', 'ネットワーク・サーバー・セキュリティ', '営業', '起業'];

for(var key in arr){

console.log('ウェブカツで学ぶのは' + key + 'です。');

}

//ウェブカツで学ぶのは0です。

//ウェブカツで学ぶのは1です。

//ウェブカツで学ぶのは2です。

//ウェブカツで学ぶのは3です。

//ウェブカツで学ぶのは4です。

//ウェブカツで学ぶのは5です。

//ウェブカツで学ぶのは6です。

//ーーーーーーーーーーーーーーーーーー

// キーしか取れないので、値を取得したいならこう使う

//ーーーーーーーーーーーーーーーーーー

for(var key in arr){

console.log('ウェブカツで学ぶのは' + arr[key] + 'です。');

}

//ウェブカツで学ぶのはHTMLです。

//ウェブカツで学ぶのはCSSです。

//ウェブカツで学ぶのはjavascriptです。

//ウェブカツで学ぶのはPHPです。

//ウェブカツで学ぶのはネットワーク・サーバー・セキュリティです。

//ウェブカツで学ぶのは営業です。

//ウェブカツで学ぶのは起業です。

MDN Web Docs

Node.parentNode

https://developer.mozilla.org/ja/docs/Web/API/Node/parentNode

指定されたノードの DOM ツリー内の親ノードを返します。

指定されたノードの DOM ツリー内の親ノードを返します。

●構文
parentNode = node.parentNode
→parentNode：指定ノードの親ノード。要素の親ノードは、Element ノード、Document ノード、または DocumentFragment になります。

TASK NOTES

【JavaScript】要素を追加するinsertBeforeとappendChildについて - TASK NOTES

https://www.task-notes.com/entry/20161020/1476974565

要素を DOM に追加する insertBefore と appendChild の使い方です。

要素を DOM に追加する insertBefore と appendChild の使い方です。

●insertBeforeで要素の前に挿入する
insertBeforeは指定した要素を現在の要素の子要素として対象要素の前に挿入します。文字だけ見ると要素がいっぱいでてきて混乱してしまいますね。
var insertedElement = parentElement.insertBefore(newElement, referenceElement)
→parentElement：挿入したい位置の親要素
→newElement：挿入したい要素 ( 戻り値 insertedElement も同じ )
→referenceElement：この要素の前に newElement が挿入される

以下のDOMに、

<div id="article">
  <div class="title"></div>
  <div class="image"></div>
  <div class="content"></div>
</div>

</div>

class=”image”要素の前にclass=”date”の要素を追加する

<script>
	var newEle = document.createElement('div');
	newEle.classList.add('date');
	var parent = document.getElementById('article');
	var reference = document.querySelector('.image');
	var rtn = parent.insertBefore(newEle, reference);
	console.log(rtn);  // <div class="date"></div>
</script>

var newEle = document.createElement('div');

newEle.classList.add('date');

var parent = document.getElementById('article');

var reference = document.querySelector('.image');

var rtn = parent.insertBefore(newEle, reference);

console.log(rtn); // <div class="date"></div>

</script>

developer.mozilla.org

https://developer.mozilla.org/ja/docs/Web/API/Element

Element は Document の中にあるすべての要素オブジェクトが継承する、もっとも一般的な基底クラスです。
このインターフェイスは、すべての種類の要素に共通するメソッドとプロパティを記述するだけのものです。
多くの具体的なクラスが Element を継承します。

●プロパティ
・Element.classList
class 属性のトークンリストを含む DOMTokenList を返します。
Element.classList は読み取り専用のプロパティで、生きた DOMTokenList コレクションでその要素の class 属性を返します。
classList を使用することは、 element.className から取得した空白区切りの文字列として要素のクラスのリストにアクセスすることの便利な代替手段になります。

・Element.innerHTML
DOMString 型であり、要素内容のマークアップを表します。
Element オブジェクトの innerHTML プロパティは、要素内の HTML または XML のマークアップを取得したり設定したりします。

・Element.className
DOMString 型であり、要素のクラスを表します。
className は要素の class 属性の値の取得 / 設定に用います。

MDN Web Docs

Web API

https://developer.mozilla.org/ja/docs/Web/API

ウェブのコードを書く時は、数多くの Web API が利用できます。以下に、ウェブアプリやサイトを開発する際に利用することができる可能性があるすべてのインターフェイス (オブジェクト型) のリストを挙げます。

ウェブのコードを書く時は、数多くの Web API が利用できます。
下に、ウェブアプリやサイトを開発する際に利用することができる可能性があるすべてのインターフェイス (オブジェクト型) のリストを挙げます。

●仕様書
利用可能なすべての API の一覧です。
・CSS Object Model
・DOM
・Fetch API
・Service Workers API
・Storage
・Web Animations
・Web Storage API
・Web Workers API
・Websockets API

●インターフェイス
利用可能なすべてのインターフェイス (すなわちオブジェクトの型) の一覧です。
・Attr
・Blob
・Document
・Event
・EventListener
・File
・FileReader
・FormData
・History
・HTMLDivElement
・Location
・MouseEvent
・Navigator
・Node
・ServiceWorker
・Storage
・StyleSheet
・Text
・URL
・Window
・Worker
・XMLHttpRequest

developer.mozilla.org

https://developer.mozilla.org/ja/docs/Web/API/Document

Document インターフェイスはブラウザーに読み込まれたウェブページを表し、 DOM ツリーであるウェブページのコンテンツへのエントリーポイントとして働きます。
DOM ツリーはやなど、多数の要素を持ちます。これはページの URL を取得したり文書で新たな要素を作成するなど、文書全体に関わる機能を提供します。
（Document → Node → EventTarget）
Document インターフェイスは、あらゆる種類の文書に対して共通のプロパティやメソッドを提供します。

●メソッド
・Document.createElement()
指定したタグ名で新しい要素を生成します。
・Document.createTextNode()
テキストノードを生成します。
・Document.getElementsByClassName()
(引数で) 与えられたクラス名を持つ要素のリストを返します。
・Document.getElementsByTagName()
(引数で) 与えられたタグ名を持つ要素のリストを返します。
・document.getElementById(String id)
特定の id を持つエレメントへのオブジェクト参照を返します。
・Document.querySelector()
指定したセレクターに一致する、文書内で最初の要素ノードを返します。
・Document.querySelectorAll()
指定したセレクターに一致する、文書内のすべての要素ノードのリストを返します。

●プロパティ
・Document.body
現在の文書のまたはノードを返します。

・Document.head
・Document.forms
・Document.images
・Document.scripts
・Document.cookie

●コンストラクター
・Document()
新しい Document オブジェクトを作成します。