Question

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

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

template未在屏幕上呈现
template没有进入DOM
还有一个content属性，用作template及其内容之间的虚拟元素

除此之外，<template>可能是div，隐藏在屏幕和DOM之外。在这方面，用于利用template的JavaScript与尝试使用div伪造的JavaScript相同。

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

我只需要在自己的脑海里清楚地说清楚
为不支持的浏览器伪造一个相对容易。

由于

Answer 1

存在一些主要差异：

脚本（<script>）<template>元素中的未立即执行。

中的

媒体内容（<audio>，<video>，<img>）将无法加载 immedialtey

相反，它们将在渲染的DOM树中插入后执行或加载。

querySelector()方法调用和CSS 选择器不会探索 <template>的内容，但您仍然可以使用{{1}访问内部元素} querySelector()属性。

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

innerHTML元素可以放在<template>元素中。

您可以使用<head>作为字符串访问模板内容，也可以使用.innerHTML作为DocumentFragment访问。

然后伪造所有这些行为是很困难的。有some polyfills可以部分地做到这一点。我建议Neovov's one。

看看这个说明性的例子：

.content

//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 }

Answer 2

简而言之，模板标签就是它听起来的样子。它只是JavaScript在未来创建的模板。

虽然与隐藏的<div>略有不同，但基本上你是对的，它可以伪造成隐藏的div

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

本文对此有很好的解读： https://www.sitepoint.com/html5-template-tag/

HTML模板元素：澄清

2 个答案: