HTML5中<template>标签的详细介绍（图文）(2)-木庄网络博客

当前第2页返回上一页

2. 标签位置任意性
除了上面<template>子元素天然隐藏外，<template>标签还有一个特性，就是位置任意性，这非常类似<script>或者<style>标签，可以在<head>中，也可以在<body>或者<frameset>中。

3. childNodes无效性
虽然，肉眼看上去是<template>标签里面还有很多子标签，这种惯性思维在这里是不受用的。假设变量template是我们获得的一个<template>标签DOM（里面一大堆HTML代码），你会发现：template.childNodes是个空大屁。我们可以使用template.innerHTML获取完整的HTML片段。如果你非得获取“伪子元素”。也是有办法的，OK，睁大眼睛，要使用content属性。

template.content会返回一个文档片段，你可以理解为另外一个document，然后，使用document下的一些查询API就可以获得<template>标签里面的“伪子元素”了。例如，获得第一张图片元素则是：

CSS Code复制内容到剪贴板

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

三、HTML5 template元素终面

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

模板元素与CSS
如果浏览器有眼不识泰山，认为<template>就是个普通的自定义元素，则显示的就会使下面这个样子，内部的标签按照一般的标签渲染了。

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

也就是说，虽然从CSS的角度看，<template>就是个跟CSS打得火热的普通元素，但是，从HTML角度看，其犹如带土的写轮眼，可以让内部标签转移到异空间，血迹界限般稀有。

默认情况下，<template>是隐藏的，实际是默认其display属性为none. 使用下面的代码一测便知：

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

因此，demo中才设置了如下的CSS声明：

CSS Code复制内容到剪贴板

1	`template { display: block; ... }`

模板的克隆

如果你是在HTML字符串上处理，类似于现在流行的MVC框架或模板技术，则template.innerHTML足矣。然，<template>比<script>强大之处在于，<script>内部内容只能当做字符串来获取，而<template>虽然存在于异空间，但是，依然可以节点获取（上面有展示），以及完整克隆，语法类似下面：

CSS Code复制内容到剪贴板