Html5中的<template>标签-原创手记-慕课网

template标签的作用：
我的理解就是html的模板盒子，在html中如果有很多重复的结构，就可以把重复部分写在这个标签内部供整个文档调用。

template标签的特点：
1.跟script标签一样在文档中是不可见的；
2.拥有content属性（通过这个也可以判断浏览器是否支持template标签）；
3.标签内的节点虽然不可见但支持DOM操作；

怎么用：
在使用之前，需要知道2个点。
1- importNode()
importNode() 方法把一个节点从另一个文档复制到该文档以便应用。
2- DocumentFragment
DocumentFragment是一个节点类型，代表轻量级的 Document 对象，能够容纳文档的某个部分，DocumentFragment 节点不属于文档树。
（采用W3C）

html：

<div id="box">
        <h3>链接支持</h3>
    </div>

    <template id="temp">
      <dl>
        <dt></dt>
        <dd><a href=""></a></dd>
      </dl>
    </template>

javascript:

//这里通过content来判断浏览器是否支持template标签
if ('content' in document.createElement('template')) {
      var temp = document.getElementById('temp'),
      dt = temp.content.querySelector("dt"),
      a = temp.content.querySelector("a"),
      dt.textContent = "慕课网",
      a.textContent = "去学习",
      a.href = "http://www.imooc.com";

      var box = document.getElementById("box");
      var clone = document.importNode(temp.content, true);
      box.appendChild(clone);

      dt.textContent = "百度一下";
      a.textContent = "去搜索";
      a.href = "http://www.baidu.com";
      var clone2 = document.importNode(temp.content, true);
      box.appendChild(clone2);
    }

最后HTML结构就是这样：

 <div id="box">
        <h3>链接支持</h3>
        <dl>
            <dt>慕课网</dt>
            <dd><a href="http://www.imooc.com">去学习</a></dd>
        </dl>
        <dl>
            <dt>百度一下</dt>
            <dd><a href="http://www.baidu.com">去搜索</a></dd>
        </dl>
    </div>

代码说明：

temp.content.querySelector("dt")；
//要对template标签内的节点进行操作必须通过temp.content返回的节点来操作
//解释一下为什么不能直接temp.querySelector("dt")
//这里的temp并不是一个正常的文档结构
//通过consloe.log(temp)来看，temp返回的是<template>中的一个节点片段，
//而不是直接的节点，在chrome中后台打印的是：
<template id="temp">
    #document-fragment  
//这就是DocumentFragment节点，这里面才包含了template中的HTML结构
</template>
//所以这里为什么不能用temp.querySelector("dt")来操作

当然通过temp.content得到就是#document-fragment，通过它就能读取到节点

document.importNode(temp.content, true);
//这个是导入节点，理解上面DocumentFragment特点后，
//就明白为什么不使用innerHTML来写入节点

template目前为止【2016-6】IE是无法读取的，火狐和谷歌支持！