文章目录
一、html5中的template标签
html中的template
标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template
标签。这是因为template标签天生不可见,它设置了display:none;
属性。
<!--当前页面只显示"我是自定义表现abc"这个内容,不显示"我是template",这是因为template标签天生不可见-->
<template><div>我是template</div></template>
<abc>我是自定义表现abc</abc>
二、template标签操作的属性和方法
content
属性:在js中template标签对应的dom对象存在content属性,对应的属性值是一个dom节点,节点的nodeName是#document-fragment。通过该属性可以获取template标签中的内容,template对象.content
可以调用getElementById、querySelector、querySelectorAll方法来获取里面的子节点。innerHTML
:可以获取template标签中的html。
<template id="tem">
<div id="div1">我是template</div>
<div>我是template</div>
</template>
<script>
let o = document.getElementById("tem");
console.log(o.content.nodeName);//#document-fragment
console.log(o.content.querySelectorAll("div"));//NodeList(2) [div#div1, div]。得到一个类数组
console.log(o.content.getElementById("div1"));//<div id="div1">我是template</div>
console.log(