html5 语义标签 新的,HTML语义化：HTML5新标签——template - ^

一、前言 目录一坨： 二、那些年我们存放模板文本的方式 1. 不一样的childNodes 2. 伪文档片段入口content属性 二、那些年我们存放模板文本的方式 首先要明确模板文档具有以下2个要求： 1. " ' 不被转成字符实体； 下面是常用的存放方式： // 模板文本 scrip

一、前言

目录一坨：

二、那些年我们存放模板文本的方式

1. 不一样的childNodes

2. 伪文档片段入口——content属性

二、那些年我们存放模板文本的方式

首先要明确模板文档具有以下2个要求：

1.  <> "' 不被转成字符实体；

下面是常用的存放方式：

//模板文本

//获取模板

//

var tpl = document.getElementById('tpl').innerHTML

tpl= tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')

Handlebars.compile(tpl)({title:'test'})

注意：

//模板文本

//获取模板

var tplEl = document.getElementById('tpl')var tpl =tplEl.value//通过tplEl.innerText获取也可以。但不能通过tplEl.innerHTML获取，因为它会对<>"'等转换为字符实体

tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')

Handlebars.compile(tpl)({title:'test'})

注意：

2. textarea元素必须作为body的子孙元素。

(语义为标识内容用作示例，现已被标准废除了，但各大浏览器依然支持该标签)

//模板文本

//获取模板

var tplEl = document.getElementById('tpl')var tpl =tplEl.innerHTML//通过tplEl.innerText获取也可以

tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')

Handlebars.compile(tpl)({title:'test'})

注意：

1.

2. xmp元素必须作为body的子孙元素。

//模板文本

//获取模板

var tplEl = document.getElementById('tpl')//通过tplEl.innerText获取也可以

var tpl =tplEl.innerHTML

tpl= tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')

Handlebars.compile(tpl)({title:'test'})

注意：

1. 不一样的childNodes

script、textarea和xmp方式存放模板文本时，通过 tplEl.childNodes.length 均返回1， tplEl.childNodes[0].nodeName 均返回#text。而template返回的是0。

2. 伪文档片段入口——content属性

通过innerHTML或innerText属性，template内部的模板文本将被视为普通文本来使用。但template元素为我们提供了另一种使用方式，那就是“伪文档片段”。

“伪文档片段”的[[Class]]为[object DocumentFragment]，“伪文档片段”具有文档片段的所有功能API，不同的是设置img元素的src属性不会发出资源请求。而我们可以通过content属性获取“伪文档片段”。

var tplEl = document.getElementById('tpl')var x =tplEl.contentvar img = x.querySelector('img')

console.log(img.src)//显示空字符串

console.log(img.getAttribute('src')) //显示dummy.png

img.src = img.getAttribute('src')

console.log(img.src)//显示about:blank

当添加到当前文档中才会发起资源请求。

document.body.appendChild(img)//发起资源请求

console.log(tplEl.innerHTML.replace(/^[\s\u3000]*|[\s\u3000]*$/,'')) //显示空白字符串

由于appendChild方法实际上会对元素进行剪切操作，因此无法实现模板复用的效果。因此我们需要复制模板内的元素，然后再将元素副本添加到当前文档中。实现手段有很多种，大家可以自行了解一下。

四、总结

本篇为拜读后的笔记+个人经验总结，就写到这里吧！

http://www.cnblogs.com/fsjohnhuang/p/4175711.html ^_^肥子John

五、参考

http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template