[JavaScript] template要素の中の要素を取得する方法 [nullになる？]

JavaScript
投稿日:
カテゴリー JavaScript

JavaScriptでtemplate要素の中の要素を取得する方法について説明します。

広告

この例では、template要素の中にあるtemplate要素#template2を取得します。

<template id="template1">
    <div class="post">
        <template id="template2">
            <span>Hello.</span>
        </template>
    </div>
</template>

template要素の中の要素にアクセスするには、contentプロパティを使用します。

const template1Elem = document.querySelector("#template1");
const template2Elem = template1Elem.content.querySelector("#template2"); // ok
// const template2Elem = document.querySelector("#template2"); // null
// const template2Elem = templateElem.querySelector("#template2"); // null

template要素の利用方法については、以下の書籍で詳しく学べます。プログラミングは、本で体系的に学びましょう。

広告