javascript - 如何选择模板标签内的元素？

Question

这个问题已经有答案了:

`getElementById` doesn’t find elements inside `<template>` tag (2 个回答)

已关闭 去年。

<template id="temp">
    <input class="abc">
</template>

document.getElementById('temp').querySelector('.abc').value='123'

//Cannot set value of undefined

如果我尝试记录该元素，它也会显示未定义。如何选择input里面template ？

Answer 1

首先使用.content获取模板内容，然后选择元素。

var input = document.getElementById("temp").content.querySelector('.abc');
input.value='123';

//equivalent to document.getElementById('temp').content.querySelector('.abc').value='123'


console.log(input.value);

<template id="temp">
    <input class="abc">
</template>