6

我最近发现了 HTMLtemplate元素，希望得到一些澄清。

据我所知，三个显着特征是：

  • template未在屏幕上呈现
  • template没有进入 DOM
  • 在 the和它的内容之间有一个额外的content属性充当虚拟元素template

除了这些， a<template>可能是 a div，隐藏在屏幕和 DOM 之外。在这方面，用于利用 的 JavaScripttemplate与尝试使用div.

问题是，这是正确的吗？我问是因为：

  • 我只需要在我自己的脑海中弄清楚
  • 对于不支持的浏览器来说，伪造一个相对容易。

谢谢

4

2 回答 2

6

有一些主要区别：

  1. 元素中的脚本( <script>)不会立即执行。<template>

  2. 模板内的媒体内容( <audio>, <video>, )不会立即加载。<img>

    相反，一旦它们被插入到渲染的 DOM 树中，它们就会被执行或加载。

  3. querySelector()方法调用和 CSS选择器不会探索a 的内容<template>，但您仍然可以通过使用querySelector()其content属性来访问其中的元素。

  4. 使用 HTML5 模板，您可以以Document Fragment的形式访问其所有内容，并使用 将其插入到 DOM 树中appendChild()，而不是修改innerHTML.

  5. <template>元素可以放在<head>元素中。

  6. 您可以使用字符串访问模板内容，也可以使用.innerHTMLDocumentFragment访问模板内容.content。

那么要伪造所有这些行为是相当困难的。有一些 polyfill可以部分做到这一点。我会推荐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

想象一下这种情况，您的网页有 2 个输入，一个输入您的姓名，一个输入您的年龄。通过使用template标签创建一个简单的表格，您可以使用 JavaScript 在同一页面中使用您的输入填充表格。

这篇文章有很好的阅读： https ://www.sitepoint.com/html5-template-tag/

于 2016-06-28T01:33:47.410 回答