HTML Templates

HTML Templates

HTML Templates相當於模板，它提供了可複用重用的DOM結構塊，在模板內容的DOM塊跟普通的HTML DOM結構塊沒有什麼區別。

1 定義（聲明）HTML Templates，定義/聲明HTML Templates，需要藉助新的<template>標籤，如下示例：

<template>
    <img src="" alt="user photo"/>
    <div class="user-name"></div>
    <div class="user-desc">This is the description for ...</div>
</template>

可以看到，除了外層使用<template>外，內部只是普通的HTML DOM結構塊而已。而且，template中還可以包含樣式<style></style>以及腳本<script></script>標籤。

HTML Templates有一個特性，就是它定義的是一個“惰性”DOM塊，所謂“惰性”，就是說該DOM塊在被“激活”前裏面的圖片資源不會被下載，腳本也不會被執行。

2 使用HTML Templates

前面已經定義了一個HTML Templates模板，我們可以在需要的地方使用它，使用的方法如下：

    <template>
        <img src="" alt="user photo"/>
        <div class="user-name"></div>
        <div class="user-desc">This is the description for ...</div>
    </template>
    <script>
        var tmpl = document.querySelector('template');
        var cont = tmpl.content;
        cont.querySelector('img').src = 'kitty.jpg';
        cont.querySelector('.user-name').textContent = 'Hello Kitty';
        document.body.appendChild(document.importNode(tmpl.content, true));
    </script>

template有一個content屬性，通過content屬性可以獲取到template裏面的內容（DOM結構塊），它是一個文檔片段（Document Fragment）內容，即：

<img src="" alt="user photo"/>
<div class="user-name"></div>
<div class="user-desc">This is the description for ...</div>

在返回的文檔片段上，可以調用找到片段中的標籤元素（如通過querySelector方法）。找到相應的元素後，進行相應的設置。

最後需要將模板的內容添加到主文檔中：

document.body.appendChild(document.importNode(tmpl.content, true));

運行結果：