<template要素> - テンプレート
公開日:
template要素は、テンプレートを表す要素です。この要素内のコンテンツは、DOMに存在しないものとして扱われます。画像や動画を配置してもダウンロードされません。複雑な構造のHTMLをあらかじめ用意しておき、後でJavaScriptで内容を複製して使い回したい場合に便利な要素です。
概要
- 名前
- template
- カテゴリー
- Metadata content
- Flow content
- Phrasing content
- Script-supporting element
- 配置できる場所
- Metadata contentが期待される場所。
- Phrasing contentが期待される場所。
- Script-supporting elementが期待される場所。
- span属性を持たないcolgroup要素の子要素。
- コンテンツモデル
- なし。
- タグの省略
- 開始タグも終了タグも省略できません。
- DOM Interface
- HTMLTemplateElement
- デフォルトのスタイル
template { display: none; }
- 仕様書
- https://html.spec.whatwg.org/multipage/scripting.html#the-template-element
属性
グローバル属性
全てのタグで利用できるグローバル属性を指定できます。
説明
template要素の価値
モーダルウィンドウで表示するコンテンツやライトボックスの画像周りのテンプレートなど、後から利用するかしないか分からないHTMLがあります。それらは必要時に動的にJavaScriptで生成してもいいですが、それも大変なので、できればHTMLで用意しておきたいものです。そんな時に役立つのがtemplate要素です。
テンプレートとなるHTMLを、非表示状態にしたdiv要素で用意したとしましょう。実際にそうしている人は多いはずです。div要素はコンテンツの一部だとみなされます。例えば、画像や動画を内部に配置した場合、ページを開いた時点でダウンロードが開始してしまいます。利用するかしないか分からない時点でダウンロードするのは無駄ですね。
対して、template要素はコンテンツの一部とはみなされず、レンダリング上、存在しないものとして扱われます。つまり、この内部に画像や動画を配置してもダウンロードされることがありません。必要時、JavaScriptでtemplate要素の内容をコピーして、利用する時に初めてそれらはダウンロードされます。この一例のように、template要素はHTMLのテンプレートを用意しておくのに他の要素よりも適した要素だと言えます。
基本的な使い方
template要素に、テンプレートとなるHTMLを用意しておきます。例えば、モーダルウィンドウを想定してみましょう。画像を配置しても、このままではダウンロードされません。
HTML
<template id="syncer">
<p>モーダルウィンドウの内容です。</p>
<p><img src="/image/mascot/200.png" alt="マスコットキャラクター"></p>
<p>呼び出し時、一部を動的に変更するなどして使い回しましょう。</p>
</template>
<div id="view"></div>
template要素のcontentプロパティには、要素の内容がDocumentFragmentで含まれています。これを複製することで、テンプレートを使い回すことができるというわけです。この例では、単純に複製した内容をそのまま、div要素の中に追加しているだけです。
JavaScript
// template要素を取得
var targetElement = document.getElementById( "syncer" ) ;
// 内容を複製
var cloneContent = targetElement.content.cloneNode( true ) ;
// div#viewの中に追加
document.getElementById( "view" ).appendChild( cloneContent ) ;
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】<template要素> - テンプレート</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/template/">
<style>
body {
background-color: #fff ;
}
#view {
margin-top: 24px ;
padding: 12px ;
border: 1px solid #000 ;
}
</style>
</head>
<body>
<p>template要素は、後でJavaScriptなどで使い回せるテンプレートを用意しておくための要素です。この要素の中に配置したDOMは存在しないものとして扱われ、画像や動画を配置しても転送が発生しません。</p>
<template id="syncer">
<p>テンプレートの内容です。</p>
<p><img src="/image/mascot/200.png" alt="マスコットキャラクター"></p>
<p>モーダルウィンドウのコンテンツをあらかじめ用意しておきたい時などに有用です。</p>
<p><button type="button" onclick="this.parentNode.parentNode.innerHTML=''">削除</button></p>
</template>
<button onclick="document.getElementById( 'view' ).appendChild( document.getElementById( 'syncer' ).content.cloneNode(true) )">テンプレートを利用</button>
<div id="view"></div>
</body>
</html>