一、html5中的template标签
template标签,顾名思义,模板的意思
HTML5提供的新标签,更加规范和语义化
可以把列表项放入template标签中,然后进行批量渲染。
html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见,它设置了display:none;属性。
二、template标签操作的属性和方法
content属性:在js中template标签对应的dom对象存在content属性,对应的属性值是一个dom节点,结构是这样的,可以看到中间有一层#document-fragment。通过该属性可以获取template标签中的内容,template对象.content可以调用getElementById、querySelector、querySelectorAll方法来获取里面的子节点,直接输出对应的Dom对象如图所示:
所以要操作template里面的dom,不能直接用template,要用template.content,如下:
<template id="tem">
<div id="div1">我是template</div>
</template>
<script>
let o = document.getElementById("tem");
console.log(o.content.nodeName);//#document-fragment
var div1 = template.content.querySelectorByTagName('div')[0];
</script>
最后举个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<template>
<div>
<ul>
<li>模板1</li>
<li>模板2</li>
<li>模板3</li>
</ul>
</div>
</template>
<button onclick="display()">点击我显示</button>
<script>
function display(){
var temp = document.getElementsByTagName("template")[0];
//通过cloneNode方法把获取到的节点再复制一份
var clo = temp.content.cloneNode(true);
document.body.appendChild(clo);
}
</script>
</body>
</html>