6

私は最近 HTMLtemplate要素を発見しました。

私が知る限り、3つの際立った機能は次のとおりです。

  • template画面にレンダリングされません
  • templateDOM に到達しない
  • とその内容contentの間の仮想要素として機能する追加のプロパティがあります。template

これらとは別に、 aは、画面と DOM から隠され<template>ている可能性があります。divこの点で、 を利用するために使用される JavaScripttemplateは、div.

問題は、これは正しいですか？私が尋ねる理由：

  • 自分の中ではっきりさせればいいだけ
  • サポートしていないブラウザ用に偽造するのは比較的簡単です。

ありがとう

4

2 に答える 2

6

いくつかの大きな違いがあります:

  1. 要素内のスクリプト( <script>) はすぐには実行されません。<template>

  2. テンプレート内のメディア コンテンツ( <audio>、<video>、 ) はすぐには読み込まれません。<img>

    代わりに、レンダリングされた DOM ツリーに挿入されると、実行またはロードされます。

  3. querySelector()メソッド呼び出しと CSSセレクターはのコンテンツを探索しませんが、そのプロパティ<template>を使用して内部の要素にアクセスすることはできます。querySelector()content

  4. HTML5 テンプレートを使用すると、そのすべてのコンテンツにDocument Fragmentの形式でアクセスし、appendChild()を変更する代わりに を使用して DOM ツリーに挿入できますinnerHTML。

  5. <template>要素は要素に配置できます<head>。

  6. .innerHTMLを使用して文字列として、または を使用して DocumentFragmentとして、テンプレートのコンテンツにアクセスします.content。

これらすべての動作を偽造することは非常に困難です。部分的にそれを行うことができるいくつかのポリフィルがあります。Neovovのものをお勧めします。

次の例を見てください。

//explore the content of the template
var script = T1.content.querySelector( 'script' )
console.log( script.innerHTML )

function insert() {
  //insert the real templete
  Target1.appendChild( T1.content.cloneNode( true ) )
  //insert the fake template
  Target2.innerHTML += D1.innerHTML
}
<template id=T1>
  Real Template -
  <script>console.log( 'executed at each insertion' )</script>
</template>

<div hidden id=D1>
  Fake Template -
  <script>console.log( 'executed only at parsing' )</script>
</div>

<button onclick="insert()">insert</button>

<div id=Target1><div>
<div id=Target2><div>

于 2016-12-08T11:19:06.067 に答える
0

要するに、テンプレート タグはまさにその名の通りです。これは、JavaScript が将来作成する単なるテンプレートです。

隠しとは少し違い<div>ますが、基本的にはあなたの言うとおりで、隠しで偽装できます。div

1 つは名前を入力し、もう 1 つは年齢を入力する 2 つの入力がある Web ページがあるシナリオを想像してください。タグを使用templateして単純なテーブルを作成すると、同じページで JavaScript を使用してテーブルに入力を移入できます。

この記事はよく読んでいます: https://www.sitepoint.com/html5-template-tag/

于 2016-06-28T01:33:47.410 に答える