templateタグでtodoリスト

この記事は5分で読めます



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

※参考:ウェブカツjavaScript・jQuery部上級(01)jQueryでTODOリスト

★ソースコード

html



js



メモ



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




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

●構文



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

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

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



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





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



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





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




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

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



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

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

以下のDOMに、



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





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 属性の値の取得 / 設定に用います。



ウェブのコードを書く時は、数多くの 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



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 オブジェクトを作成します。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

管理人紹介


21世紀、より良い人生を歩むための個人事業主による備忘録メモです。固定観念にとらわれず、日本や世界の深淵に触れ、自由快適な人生を歩んでいく事を大切にしています。