如何从文档片段中获取实际元素？

Question

我有一个像这样的模板：

<template id="my-template">
   <div></div>
</template>

我将其转换为文档片段，如下所示：

const elementFragment = document.getElementById("my-template").content.cloneNode(true);

然后我用append添加这个元素：

document.body.append(elementFragment);

现在的问题是我需要对附加元素的引用，但我拥有的引用只是 Dogument-Fragment 而不是 HTLMDivElement。

如何获取实际的 DOM 元素？

Answer 1

来自MDN：用于firstElementChild获取模板的第一个（在本例中是唯一的）子节点，它是一个实际Element节点。

const elementFragment = document.getElementById("my-template").content.firstElementChild.cloneNode(true);
                                                                      ^^^^^^^^^^^^^^^^^^

如果您的模板由多个元素组成，您需要将它们包装在一个<div>或其他容器元素中。