前言
在之前介绍创立 Custom Elements 的代码中,有一个中央是比拟繁琐的:Shadow DOM 中的每个子元素都是通过 document.createElement
办法创立的。就像上面这样的:
那到底有没有办法能简化这一步操作呢?答案是有的,就是咱们明天要介绍的配角 —— Template。
Templates 的概念
援用 MDN 上的原话是:
HTML 内容模板(
<template>
)元素 是一种用于保留客户端内容机制,该内容在加载页面时不会出现,但随后能够 (原文为 may be) 在运行时应用 JavaScript 实例化。将模板视为一个可存储在文档中以便后续应用的内容片段。尽管解析器在加载页面时的确会解决
<template>
元素的内容,但这样做只是为了确保这些内容无效;但元素内容不会被渲染。
通过这个概念解释,咱们能够晓得对于 Templates 的以下几点:
- 它是在 HTML 页面中应用的一组元素标签,即
<template></template>
; - 它在 HTML 页面解析的过程中会被解决,但不会出现在页面上;
- 它能够被 JavaScript 获取到。
Templates 是较早之前呈现的,比 Web Components 更早。
Templates 的属性
Templates 除了全局属性(也就是所有 HTML 元素所共有的属性)外,只有一个公有属性:content,这个属性是只读的,返回 Templates 外部的文档片段对象及其 DOM 构造。
在控制台操控一下 template,后果如下:
咱们能够将 templateEle.content 当做一个失常的 document 对象来应用。
简略应用 Templates
仅 HTML + Templates
<body>
<h1> 应用 Templates</h1>
<template>
<div>
这是 template 标签内的子节点内容
</div>
</template>
</body>
页面显示成果如下:
合乎以上两点:被解析、不渲染。
应用 JS
如果想要将 Templates 中的节点内容加载到以后页面显示进去,咱们能够应用一下 JS 代码实现:
// 获取 template 元素
const templateEle = document.querySelector("template");
// 获取 template 元素蕴含的文档片段
const content = templateEle.content;
// content 能够当做失常的 document 来应用
const node = content.querySelector("div");
// 追加节点到以后文档
document.body.appendChild(node);
最终成果如下:
然而这样操作的话,就存在一个缺点,因为将 Templates 代码片段外部的 div 追加到了以后文档构造,所以 Templates 外部的 div 节点隐没。
为了防止批改内容模板外部的 DOM 构造,咱们能够先克隆模板外部的元素节点,再将克隆的节点追到到以后文档:
// 获取 template 元素
const templateEle = document.querySelector("template");
// 获取 template 元素蕴含的文档片段
const content = templateEle.content;
// content 能够当做失常的 document 来应用
const node = content.querySelector("div");
// 导入 node 到 以后文档
// 必须要有这一步
const cloneNode = document.importNode(node, true);
// 也能够应用 cloneNode
// const cloneNode = node.cloneNode(true);
// 追加节点到以后文档
document.body.appendChild(cloneNode);
Templates 的兼容性
结束语
Templates 能够将一些页面内容当时封装并且保留在 HTML 页面上,且不进行渲染,随后能够应用 JS 来操作 Templates。
以上就是 Templates 的无关知识点。
~
~ 本文完,感激浏览!
~
学习乏味的常识,结识乏味的敌人,塑造乏味的灵魂!
大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢送关注,心愿大家多多指教!