当前位置：首页 > news >正文

＜template＞标签的用法

news 来源：原创 2024/5/3 12:45:51

一、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>