【HTML/JS】要素のテンプレートを作る

HTML/CSS,JavaScript

こんにちは、しきゆらです

タイトル通り要素のテンプレートを作るためのタグの存在を知ったためメモしていきます

 

これまでは、特定のタグをテンプレートとして利用するときは

CSSでdisplay:noneとかをかけて見えなくしておいた要素をelement.cloneNode()で複製していくスタイルでした

 

そんな中、HTML5から追加された(?)templateタグというものを見つけました

これの使い方や、他の方法との速度の差などをまとめていきます

 

 

templateタグとは

「MDN」とか「HTML で利用可能になった Template タグ」とかを参照のこと

特に後者はわかりやすかった

cssで非表示にする方法だと、見えないだけで画像等が裏で読み込まれてしまうが

templateタグで囲んでおけばそんな心配もない、とのこと

 

使い方

HTMLの方は単なるタグなので以下のような形で書いてあげる

<template id="temp">
    <div class="hoge">
      <p class="fuga">ほげほげ</p>
    </div>
</template>

idをつけておくと、取得が楽

 

JSの方は例えばこんな感じ

function create_from_template() {
  // テンプレートタグを取得し、中身を取得
  var temp = document.getElementById("temp").content;
  // テンプレートをDOMに
  var dom = document.importNode(temp, true);
  // templateのdomに対してあれこれする
  dom.classList.add("xxxxx");
  // テンプレートから作成したDOMを追加
  document.body.appendChild(dom);
}

.contentで取得できるのは読み取り専用のDocumentFragment

それをimportNodeで複製して、(必要な処理を加えて、)documentに追加

 

操作は簡単ですね

 

処理の速さは？

テンプレからそれぞれ１万個の要素を複製してみた結果が以下の通りです

なお、ブラウザはVivaldiさん

時間は、デベロッパーツールの「Performance」タブの中

「Buttom-up」の中の「Self Time」の部分を見てみます

  • templateタグから複製する
    • 90ms程度
  • cssで非表示にしているものをcloneする
    • 45ms程度
  • createElementで作成する
    • 150ms程度

とのこと

テストで使ったテンプレには画像や動画などはなく、上記の例で使ったような

div => p => 文字列

という構成だったため、実際には画像を引っ張る時間等も考えれば

もっと差が出るかもしれません

 

まぁ、意味もないものを作って非表示にするよりも

HTML的にはtemplateタグを使って書くほうがきちんと文章に意味を定義できているんでしょう

 

ということで、

今回はHTMLのtemplateタグと、JSでの扱い方についてでした

 

おわり

Posted by しきゆら