快捷搜索:

HTML5中的<template>标签的运用

一、HTML5 template元素初面

元素,基础上可以确定是2013年才呈现的。干嘛用的呢,顾名思意,便是用来声明是“模板元素”。

今朝,我们在HTML中嵌入模板HTML,每每是类似这样的写法:

XML/HTML Code复制内容到剪贴板

script type="text/template">

// ...

script>

实际上,并不存在type="text/template"这样的标准写法,元素的呈现旨在让HTML模板HTML变得加倍标准与规范。

曩昔,我们可能还应用过或者(破除但依然可用)嵌套非转义的HTML标签代码,实现一些特定的前端功能,但,同样的,跟上面的盛行用法一样,都是不规范的。从未来趋势来讲,显然标签才是王道。然则,兼容性是个弗成轻忽的问题,是以,就算扯得很多很少,实际代价有有限,是以,这里仅仅简单先容下。

二、HTML5 template元素复面

看下下面四种嵌套图片HTML,同时图片内容不显示,不会有哀求的写法:

XML/HTML Code复制内容到剪贴板

script type="text/template">

img src="mm1.jpg">

script>

textarea style="display: none;">

img src="mm1.jpg">

textarea>

xmp style="display: none;">

img src="mm1.jpg">

xmp>

template>

img src="mm1.jpg">

template>

1. 标签内容暗藏性

这个很憎恶的。

为文本域,里面嵌套的HTML片段会被当做文本域的值。但,文本域本身是可见的,是以必要额外的设置display: none;

是个很老很特殊的属性,语义为example,示例。听说后来被

标签取代而破除,实际上,今朝,所有的浏览器都是支持的。然则,其跟

标签不能划等号。

里面有个标签,显示的则是一张图片,而出现的便是一段HTML代码。不过,与一样,内容不显示的话,还必要额外的设置display: none;

上面这个标签上没有设置display: none;,留意到了没有。为何?这只是发挥了标签元素的蓝本特点,生成display:none,同时模板元素内部内容是生逝世不会出现的。是以,无需设置暗藏。这便是HTML5 标签元素特性之一:标签内容暗藏性.

2. 标签位置随意率性性

除了上面子元素天然暗藏外,标签还有一个特点,便是位置随意率性性,这异常类似或者标签,可以在中,也可以在或者中。

3. childNodes无效性

虽然,肉眼看上去是标签里面还有很多子标签,这种惯性思维在这里是不受用的。假设变量template是我们得到的一个标签DOM(里面一大年夜堆HTML代码),你会发明:template.childNodes是个空大年夜屁。我们可以应用template.innerHTML获取完备的HTML片段。假如你非得获取“伪子元素”。也是有法子的,OK,睁大年夜眼睛,要应用content属性。

template.content会返回一个文档片段,你可以理解为别的一个document,然后,应用document下的一些查询API就可以得到标签里面的“伪子元素”了。例如,得到第一张图片元素则是:

CSS Code复制内容到剪贴板

var image_first = template.content.querySelector("img");

三、HTML5 template元素终面

您可以狠狠地点击这里:HTML5 template模板元素体验demo

模板元素与CSS

假如浏览器有眼不识泰山,觉得便是个通俗的自定义元素,则显示的就会使下面这个样子,内部的标签按照一样平常的标签衬着了。

假如浏览器与时俱进,则显示会是下面这样,自身CSS衬着,内部标签直接异空间不衬着,例如Chrome:

也便是说,虽然从CSS的角度看,便是个跟CSS打得火热的通俗元素,然则,从HTML角度看,其如同带土的写轮眼,可以让内部标签转移到异空间,血迹边界般罕见。

默认环境下,是暗藏的,实际是默认其display属性为none. 应用下面的代码一测便知:

window.getComputedStyle(template).display;// 结果是"none"

是以,demo中才设置了如下的CSS声明:

CSS Code复制内容到剪贴板

template { display: block; ... }

模板的克隆

假如你是在HTML字符串上处置惩罚,类似于现在盛行的MVC框架或模板技巧,则template.innerHTML足矣。然,比强大年夜之处在于,内部内容只能当做字符串来获取,而虽然存在于异空间,然则,依然可以节点获取(上面有展示),以及完备克隆,语法类似下面:

CSS Code复制内容到剪贴板

var clone = document.importNode(template.content, true);

然后,你就可以用append节点(appendChild)的要领,加载模板内容了,而不是(没得选择)append字符串加载模板内容。标题是“简介”,是以,不展开,也不放详细的实例了(若有兴趣,可参考文末的参考文章),大年夜家知道有这么回事就好。

四、HTML5 template口试小结

至此,元素的行径、体现以及一些措施基础上有了大年夜致的熟识,假如这是排场试的话,则我对的评价照样挺高的,特殊场景应用的特殊利器,一些类似“异空间”的设计也是让人大年夜开眼界,这个元素要比之类的HTML5元素更受迎接更受关注也更有潜力。

临近着末,放上兼容性表,IE浏览器拖了好大年夜的后腿,不过我表示很淡定,由于对IE早已麻木!

兼容性

您可能还会对下面的文章感兴趣: